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，我希望取消选中并禁用所有右侧复选框，直到数据允许为a5（a5除外）为止。我可以对td的孩子使用nextUntil来执行此操作吗？我无法将类名称添加到td。请提出解决方案，谢谢。

Answer 1

您遇到的问题是复选框不是同级项，因此next()和prev()之类的DOM遍历方法将不起作用。

相反，您可以将行中的所有复选框放入单个集合中，并按索引使用它们。选择一个后，您知道应该检查所有较小的索引，而应该不检查所有较高的索引。为此，您可以像这样使用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 nextUntil与孩子

1 个答案: