jQuery 下一个直到 child

Question

我的 html 结构就像

<table>
  <tr>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a1" value="true" onchange="documentSetup.handleClick(this);" checked="">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a2" value="true" onchange="documentSetup.handleClick(this);" checked="">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a3" value="true" onchange="documentSetup.handleClick(this);" checked="">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a4" value="true" onchange="documentSetup.handleClick(this);" checked="">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a5" value="true" onchange="documentSetup.handleClick(this);" checked="">
    </td>
  </tr>
</table>

这些复选框取决于要启用的确切的前一个复选框即

如果选择 a1 到 a4，则启用 a2 a5 始终启用。

我已经使用

处理了这个问题

ruleMap(a1->a2,a2->a3,a3->a4)

但是，如果用户取消选择任何先前的检查 a2，我希望所有右侧 check-boxes 都被取消选择并禁用，直到 data-permission 为 a5（不包括 a5）。我可以在 td 的 child 上使用 nextUntil 执行此操作吗？我无法将 class 名称添加到 td。请提出解决方案，非常感谢。

Answer 1

您遇到的问题是复选框不是兄弟，因此 DOM 遍历方法（例如 next() 和 prev() 将不起作用。

相反，您可以将行中的所有复选框放入一个集合中并按索引使用它们。选择一个时，您知道应检查所有较小的索引，而应取消检查所有较高的索引。为此，您可以像这样使用 slice()：

$(':checkbox').on('change', function(e) {
  // documentSetup.handleClick(this);
  
  var $checkboxes = $(this).closest('tr').find(':checkbox');
  var index = $checkboxes.index(this);
  $checkboxes.slice(0, index).prop('checked', true);
  $checkboxes.slice(index + 1).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a1" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a2" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a3" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a4" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a5" value="true">
    </td>
  </tr>
  <tr>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a1" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a2" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a3" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a4" value="true">
    </td>
    <td class="">
      <input type="checkbox" data-id="1" data-permission="a5" value="true">
    </td>
  </tr>
</table>

另请注意，documentSetup.handleClick(this) 是从不显眼的点击处理程序中调用的，而不是过时的 onclick 属性，应尽可能避免这种情况。

jQuery 下一个直到 child

jQuery nextUntil with child

javascript

jquery

jquery-selectors

nextuntil