选择除禁用的所有复选框元素答案

【问题标题】：Select all checkbox elements except disabled ones选择除禁用的所有复选框元素
【发布时间】：2018-07-18 13:09:37
【问题描述】：

我想选择所有 checkbox 元素，除了禁用的元素，

这是我的html

<input id="chkSelectAll" class="checkbox" type="checkbox" />Select All

<div id="ContentPlaceHolder1_listItem_pnlDis_0">
    <input id="checkApproved" type="checkbox" name="checkApproved" checked="checked" disabled="disabled">
</div>
<div id="ContentPlaceHolder1_listItem_pnlDis_8" class="dis">
    <input id="checkApproved" type="checkbox" name="ctl00$ContentPlaceHolder1$listItem$ctrl8$checkApproved">
</div>

jQuery

$('#chkSelectAll').click(function () {
    var checked_status = this.checked;
    //   alert(checked_status);
    $('div#item input[type=checkbox]').each(function () {
        this.checked = checked_status;
    });
})

它适用于选择所有 checkbox 元素，但我想跳过禁用的元素。

我该怎么做？

【问题讨论】：

$('div#item input[type=checkbox]:not(:checked)')
可能重复stackoverflow.com/questions/1723649/…
Jquery select all if not disabled的可能重复

标签： jquery

【解决方案1】：

使用 not() 排除具有禁用属性的事物。

$('#chkSelectAll').click(function () {
    var checked_status = this.checked;

    $('div#item input[type=checkbox]').not("[disabled]").each(function () {
               this.checked = checked_status;
    });
});

更简洁

$('#chkSelectAll').click(function () {
    var checked_status = this.checked;
    $('div#item input[type=checkbox]').not(":disabled").prop("checked", checked_status);
});

【讨论】：

@SizS：你不需要.each。你也可以只做$('input[type=checkbox]').not(":disabled").prop('checked', checked_status); - DEMO
可能更常见的选择器使用方式是 not(":disabled")。

【解决方案2】：

可以这么短

$('#chkSelectAll').click(function() {
    $('div#item :checkbox:not(:disabled)').prop('checked', this.checked);
});

http://jsfiddle.net/hRc4a/

【讨论】：

【解决方案3】：

$('#chkSelectAll').click(function () {
    var checked_status = this.checked;

    $('div#item input[type=checkbox]').each(function () {
           if (!this.disabled) 
               this.checked = checked_status;
    });
});

或者没有每个循环：

$('#chkSelectAll').on('click', function() {
    var checked_status = this.checked;

    $('div#item input[type=checkbox]').prop('checked', function(i, prop) {
         return this.disabled ? prop : checked_status;
    });
});

【讨论】：

【解决方案4】：

    $('#chkSelectAll').click(function () {
        var checked_status = this.checked;
        //   alert(checked_status);
        $('div#item input[type=checkbox]').each(function () {
             if(!$(this).is(':disabled'){
                 this.checked = checked_status;
             }

        });
    })

【讨论】：

【解决方案5】：

或者您也可以使用 :not 选择器，如下所示：

$('#chkSelectAll').click(function () {
    var checked_status = this.checked;
    $('div#item input[type=checkbox]:not(:disabled)').each(function () {
               this.checked = checked_status;
    });
});

【讨论】：

【解决方案6】：

我个人建议：

$('#chkSelectAll').change(function(){
    var self = this;
    $('input:checkbox').filter(function(){
        return !this.disabled
    }).prop('checked',self.checked);
});

JS Fiddle demo.

参考资料：

【讨论】：

我假设运行filter 方法比简单地使用not 选择器慢很多。
@FrançoisWahl：我没有考虑过的一点，奇怪的是：该死，现在我必须去 JS Perf-in' 进行测试。（好吧，反正饭后……）
我想知道同样的事情：jsperf.com/not-vs-filter 我为每个排列添加了检查和取消检查。不确定它是否写得足够好，但可以试一试，看看你是否可以改进它。我认为filter 较慢的原因是因为它首先收集所有内容，然后遍历所有内容以排除禁用的内容。虽然not 选择器不会选择/返回禁用的选择器。我想如果可能的话，只返回你需要开始的东西也是有意义的。

【解决方案7】：

检查除禁用以外的所有内容

$('input:checkbox:not(:disabled)').attr('checked', 'checked');

取消选中除禁用以外的所有选项

$('input:checkbox:not(:disabled)').removeAttr('checked');

【讨论】：

【解决方案8】：

如果您想选择除禁用行之外的所有行，我个人建议使用此解决方案。

只需在复选框输入（HTML）中添加此代码

onclick="$('input[name*=\'selected\']:not(:disabled)').prop('checked',this.checked);"

【讨论】：