Question

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

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

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

Answer 1

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

$('#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" />

Answer 2

你快到了。对您当前的代码使用not（＆＃34;：disabled＆＃34;）过滤器，它将忽略那些被禁用的复选框。

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

请参阅此问题看起来非常相似：jquery selector for all checked checkboxes that are not disabled

Answer 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树上进行。

还要注意你在代码示例中错过了大括号。

单击checkAll时，禁止检查已禁用的复选框

3 个答案: