1

我的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 a5 始终启用，则启用 a2。

我已经使用

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

但是，如果用户取消选择任何先前的检查 a2，我希望取消选择并禁用所有右侧的复选框，直到数据权限为 a5（不包括 a5）。我可以在 td 的孩子上使用 nextUntil 执行此操作吗？我无法将类名添加到 td。请提出解决方案非常感谢。

4

1 回答 1

0

您遇到的问题是复选框不是兄弟，因此 DOM 遍历方法（例如next()and ）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属性，应尽可能避免。

于 2018-10-22T12:43:33.613 回答