jQuery nextUntil с ребенком

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>

эти флажки зависят от точного предыдущего флажка, который должен быть включен, то есть

a2 включен, если выбран a1, пока a4 a5 всегда включен.

Я обработал это с помощью

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

Но если пользователь отменяет выбор любой предыдущей проверки a2, я хочу, чтобы все флажки на правой стороне были сняты и отключены до тех пор, пока разрешение на данные не станет равным a5 (исключаяa5).Могу ли я сделать это с помощью nextUntil на child of 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, которого по возможности следует избегать.