jQuery nextUntil with child

Question

my html structure is like

<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>

these check boxes depend on the exact previous checkbox to be enabled that is

a2 is enable if a1 is selected till a4 a5 is always enable.

I have handled this using

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

But if user deselects any previous check a2 I want all of the right side check-boxes to be deselected and disabled until data-permission is a5(excluding a5). Can I do this with nextUntil on child of td? I can not add class name to td. Please suggest a solution thanks a lot.

Please edit your snippet and add relevant script to make a [mcve] — mplungjan, Oct 22 '18 at 12:36

Rory McCrossan · Accepted Answer · 2018-10-26T06:53:56.657

The issue you have is that the checkboxes are not siblings, so DOM traversal methods such as next() and prev() won't work.

Instead you can place all the checkboxes in the row in to a single collection and work with them by index. When one is selected you know that all lesser indexes should be checked and all higher indexes should be unchecked. To do that you can use slice() like this:

$(':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>

Also note that documentSetup.handleClick(this) is called from within the unobtrusive click handler, instead of the outdated onclick attribute, which should be avoided where possible.

there are multiple rows in the table and when I select a checbox in the right all the previous checkboxes also get selected with this code — 00Shunya, Oct 23 '18 at 04:38
In that case you can amend the logic slightly to only look for checkboxes within the current row by using `closest()`. I've amended the answer for you — Rory McCrossan, Oct 26 '18 at 06:54
it worked with little bit modification as per my need thanks.! — 00Shunya, Oct 29 '18 at 05:36

jQuery nextUntil with child

1 Answers1