防止在单击 checkAll 时选中已禁用的复选框答案

【问题标题】：prevent already disabled checkbox from being checked when click on checkAll防止在单击 checkAll 时选中已禁用的复选框
【发布时间】：2017-03-22 04:53:45
【问题描述】：

下面是我用来检查所有复选框的代码。

jQuery("#checkAll").on('click',function() { // bulk checked
            var status = this.checked;
            jQuery(".selectRow").each( function() {
                jQuery(this).prop("checked",status);
            });
        });

但当我单击 CheckAll 链接时，也会选中已禁用的复选框。单击 checkAll 链接时如何停止选中已禁用的复选框？任何帮助将不胜感激。

Answer: The whole code looks like this

jQuery("#checkAll").on('click',function() { // bulk checked
                var status = this.checked;
                jQuery(".selectRow").not(":disabled").each( function() {
                    jQuery(this).prop("checked",status);
                });
            });

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

您可以使用:not 选择器来选择每个没有[disabled] 属性的checkbox：

$('#checkAll').on("click", function(event){
  $('input[type="checkbox"]:not([disabled])').prop('checked', true)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" /><br />
<input type="checkbox" disabled="disabled" /><br />
<input type="checkbox" /><br />
<input id="checkAll" type="button" value="check all" />

【讨论】：

【解决方案2】：

你快到了。将 not(":disabled") 过滤器与您当前的代码一起使用，它将忽略那些被禁用的复选框。

jQuery(".selectRow").not(":disabled")...

查看这个看起来非常相似的问题：jquery selector for all checked checkboxes that are not disabled

【讨论】：

【解决方案3】：

一个简单的例子说明它是如何工作的

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(doReady);

        function doReady()
        {
            jQuery('#checkAll')
                    .on("click",
                            function (event) {
                                var $that = null;
                                event.preventDefault();
                                    jQuery.each(jQuery(".selectRow"),
                                            function (index, value) {
                                                $that = jQuery(value);
                                                if (!$that.is(':checked') && !$that.is(":disabled")) {
                                                    jQuery(this).attr("checked", "checked");
                                                }
                                            }
                                    );
                            }
                        );
        }
    </script>
</head>
<body>
    <button id="checkAll" name="checkAll">check</button>
    <input type="checkbox" class="selectRow" />
    <input type="checkbox" class="selectRow" />
    <input type="checkbox" class="selectRow" />
    <input type="checkbox" class="selectRow" />
    <input type="checkbox" class="selectRow" />
    <input type="checkbox" class="selectRow" disabled="disabled" />
</body>
</html>

请注意，最好将相同的 jQuery 选择器分配给一个变量，以避免第二次遍历整个 DOM 树。

另外请注意，您在代码示例中遗漏了一个花括号。

【讨论】：