Disable checkbox using jQuery

Question

I will disable id using the following jquery

JQuery

$('.ColVis_collection button').first().find('input').attr("disabled", true);

HTML

This code is located inside another button, which when pressed is activated as a drop-down menu.

<div class="ColVis_collection TableTools_collection" style="display: block; position: absolute; opacity: 1; top: 102px; left: 274px; width: 449px;">
    <button class="ColVis_Button TableTools_Button" style="width: 449px;">
        <span>
            <span class="ColVis_radio">
                <input type="checkbox" checked="checked">
            </span>
            <span class="ColVis_title">
                <span>
                    id
                </span>
            </span>
        </span>
    </button>
    <button class="ColVis_Button TableTools_Button" style="width: 449px;">
        <span>
            <span class="ColVis_radio">
                <input type="checkbox" checked="checked">
            </span>
            <span class="ColVis_title">
                <span>
                    name
                </span>
            </span>
        </span>
    </button>
    .
    .
    .
</div>

The first button with the span identifier is disabled using jquery and blurred, indicating that it is disabled, but you can click it, that is, check / uncheck the box. Did I miss something?

Edit:

I am using the colvis datatables jQuery function, which allows you to hide / show table columns

As you can see in this image, the checkbox is disabled, but can be checked / unqualified

Answer 1

.prop() .attr(),

$('.ColVis_collection button').first().find('input[type="checkbox"]').prop("disabled", true);

: Fiddle

Answer 2

:

 $("input").prop('disabled', true);

Answer 3

Try adding a read-only attribute:

$('.ColVis_collection button').first().find('input').attr("disabled", true).attr("readonly", true);

This can help you figure it out.,.

Answer 4

I do not understand what happened. Maybe I'll take a look later. The hiding of the first button ie has ended

$('.ColVis_collection button').first().attr("hidden", true);