Question

我在表格中有标签的复选框。我在“全部选择”表中添加了一个带有“chkbox”的复选框。现在下面的代码工作正常。它是选择和取消选中表格中的所有复选框。现在有一些页面由于业务逻辑而禁用了一些复选框。我希望这些复选框不会受到影响。

<script type="text/javascript">
var s = jQuery.noConflict();
s(document).ready(function() {
    s('#chkbox').change(function() {
        var all = s('table').find('input[type="checkbox"]');
        if (this.checked) {
            all.prop('checked', true);
        } else {
            all.prop('checked', false);
        }
    });
});
</script>

Answer 1

将:not()与:disabled选择器一起使用。

var all = $('table').find('input[type="checkbox"]:not(:disabled)');
                                                 ^^^^^^^^^^^^^^^^

这不会选择已禁用的复选框

$('#selectAll').change(function() {
  $(':checkbox:not(:disabled)').prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" />Select All

<ul>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
</ul>

您也可以使用:enabled选择器。

$('table').find('input[type="checkbox"]:enabled')

$('#selectAll').change(function() {
  $(':checkbox:enabled').prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" /> Select All

<ul>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
</ul>

请注意：:enabled == :not(:disabled)

使用全选时排除已禁用的复选框

1 个答案: