使用jQuery禁用复选框

Question

我正在使用以下jquery

禁用ID复选框

的jQuery

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

的HTML

此代码位于另一个按钮内，点击后会像下拉列表一样被激活。

<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>

使用jquery禁用带有span id的第一个按钮，并且模糊显示它已被禁用但可以单击，即选中/取消选中。我错过了什么吗？

编辑：

我正在使用jQuery数据表colvis功能，它可以隐藏/取消隐藏表格列

正如您在此图片中看到的那样，该复选框似乎已禁用，但可以选中/取消选中

Answer 1

使用.prop()代替.attr()来设置已禁用的属性

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

演示：Fiddle

Attributes vs. Properties

Answer 2

尝试这样的事情：

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

Answer 3

尝试添加只读属性：

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

那可能会让你失望。 。

Answer 4

没想清楚发生了什么。我可以稍后看看。结束隐藏第一个按钮，即

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