disabling checkbox using jQuery

Question

I am disabling the ID checkbox using following jquery

jQuery

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

html

This code is inside another button, which when clicked gets activated like a dropdown.

<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 span id gets disabled using the jquery and blurred showing that it is disabled but it can be clicked i.e. checked/unchecked. Am I missing something?

Edit:

I am using jQuery datatables colvis feature, which lets you hide/unhide the table columns

As you can see in this image, the checkbox seems disabled but can be checked/uncheked

Answer 1

Use .prop() instead of .attr() to set the disabled property

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

Demo: Fiddle

Attributes vs. Properties