当点击checkAll时防止已经禁用的复选框被检查

2018-06-25 09:02:21

以下是我用于检查所有复选框的代码。

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

但是当我点击CheckAll链接时，已经禁用了复选框。点击checkAll链接时如何阻止已禁用的复选框被选中？任何帮助将不胜感激。

你几乎在那里。在当前代码中使用not（“：disabled”）过滤器，它将省去禁用的复选框。

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

看到这个看起来非常相似的问题：jquery选择所有未被禁用的复选框

您可以使用: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" />

关于它如何工作的一个简单例子

<!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树上获得第二次。

另外请注意，你错过了代码示例中的大括号。

链接地址: http://www.djcxy.com/p/71043.html

上一篇: prevent already disabled checkbox from being checked when click on checkAll

下一篇: jQuery onchange event won't prop disabled attribute of HTML to false