无法第二次检查所有表行

Question

我有一个显示一些数据的 HTML 表格。我在尝试进行多项选择时遇到问题。

如果我点击<th> 上的复选框（选择所有行），tbody > tr 中的所有复选框都会被选中 - 正如预期的那样。我再次单击并全部取消选择 - 正如预期的那样。如果我再次单击 th 复选框，它不会选择 tbody 内的任何内容。我该如何解决这个问题？

$(document).ready(function() {
  toggleDeleteButton = function() {
    // alert($('.selector:checked').length);

    if ($('.selector:checked').length) {
      $('.btn-delete-selected').removeClass('disabled');
    } else {
      $('.btn-delete-selected').addClass('disabled');
    }
  }
  
  function update_selection(obj) {
    var state = obj.checked;
    if (state === undefined) {
      state = false;
    }
    $(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th class=""><input onchange="update_selection(this); toggleDeleteButton();" type="checkbox"></th> // Selecting all
      <th class="">
        <a href="#">#</a>
      </th>
      <th class="">
        <a href="#">Data #1</a>
      </th>
      <th class="">
        <a href="#">Data #2</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">3</td>
      <td class="text-right">£ 1.00</td>
      <td class="center">Foo</td>
    </tr>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">4</td>
      <td class="text-right">£ 2.50</td>
      <td class="center">FooBar</td>
    </tr>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">5</td>
      <td class="text-right">£ 3.00</td>
      <td class="center">Bar</td>
    </tr>
  </tbody>
</table>

Answer 1

您遇到的最大问题是您使用了on* 事件属性。除了过时之外，这还要求您调用的函数在window 的范围内可用。由于您在 document.ready 处理程序中定义了您的函数，因此无法正常工作。

为了改进代码和解决问题，请删除 on* 属性并使用不显眼的 JS 附加您的事件。您还可以使用prop() 和toggleClass() 来简化逻辑，如下所示：

$(document).ready(function() {
  $('th :checkbox').change(function() {
    $('.selector').prop('checked', this.checked);
    $('.btn-delete-selected').prop('disabled', this.checked).toggleClass('disabled', this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th class=""><input type="checkbox"></th>
      <th class="">
        <a href="#">#</a>
      </th>
      <th class="">
        <a href="#">Data #1</a>
      </th>
      <th class="">
        <a href="#">Data #2</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">3</td>
      <td class="text-right">£ 1.00</td>
      <td class="center">Foo</td>
    </tr>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">4</td>
      <td class="text-right">£ 2.50</td>
      <td class="center">FooBar</td>
    </tr>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">5</td>
      <td class="text-right">£ 3.00</td>
      <td class="center">Bar</td>
    </tr>
  </tbody>
</table>

Answer 2

如果将 attr() 更改为 prop()，它应该可以正常工作。

$(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state);

到

$(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').prop('checked', state);