Can not access checkbox by array in table with jQuery

Question

I made 3 input checkbox with input name, id, dt, ts. where dt and ts are disabled so when i click id then input dt and ts will be enabled, but i have problem can not access array.

<table id="tbl_employee" class="table table-striped table-bordered show-child-rows"  style="width:100%">
  <thead>
    <tr>
      <th class="text-center" width="5%">ID</th>
      <th class="text-center" width="5%">DT</th>
      <th class="text-center" width="5%">TS</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($employee as $row){?>
    <tr>
      <td class="text-center" width="5%"><input type="checkbox" name="id[<?= $row['id_p']?>]" value="<?= $row['id_p']?>"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="dt[<?= $row['id_p']?>]" value="1" disabled></td>
      <td class="text-center" width="5%"><input type="checkbox" name="ts[<?= $row['id_p']?>]" value="1" disabled></td>
    </tr>   
    <?php } ?>  
  </tbody>
</table>

$(document).ready(function() {  
    $('[name="id[<?= $row['id_p']?>]"]').click(function() {
        var checked = $(this).is(':checked');
        if (checked) {
            $('[name="dt[<?= $row['id_p']?>]"]').prop('disabled', false);
            $('[name="ts[<?= $row['id_p']?>]"]').prop('disabled', false);
        } else {
            $('[name="dt[<?= $row['id_p']?>]"]').prop('disabled', true);
            $('[name="ts[<?= $row['id_p']?>]"]').prop('disabled', true);
        }
    });

})

Please click <> and post HTML and JS instead of PHP in a minimal reproducible example — mplungjan
– mplungjan, Commented Jul 9, 2018 at 8:10

mplungjan · Accepted Answer · 2018-07-09 08:40:28Z

3

You're overcomplicating the logic by attempting to use the row identifier in the selector. You can instead generalise the logic to avoid the need to use that by using DOM traversal.

Put a common class on the id[X] checkboxes, then use closest() to get the parent tr, then find() the relevant checkboxes within that. Then you can enable/disable them based on the state of the checked property. Also note that you should use the change event on checkboxes, not click, for accessibility reasons. Try this:

$(function() {
  $('.toggle').change(function() {
    $(this).closest('tr').find(':checkbox').not(this).prop('disabled', !this.checked);
  }).change();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_employee" class="table table-striped table-bordered show-child-rows" style="width:100%">
  <thead>
    <tr>
      <th class="text-center" width="5%">ID</th>
      <th class="text-center" width="5%">DT</th>
      <th class="text-center" width="5%">TS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center" width="5%"><input type="checkbox" name="id[0]" class="toggle" value="0"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="dt[0]" value="1" disabled></td>
      <td class="text-center" width="5%"><input type="checkbox" name="ts[0]" value="1" disabled></td>
    </tr>
    <tr>
      <td class="text-center" width="5%"><input type="checkbox" name="id[1]" class="toggle" value="1"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="dt[1]" value="1" disabled></td>
      <td class="text-center" width="5%"><input type="checkbox" name="ts[1]" value="1" disabled></td>
    </tr>
    <tr>
      <td class="text-center" width="5%"><input type="checkbox" name="id[2]" class="toggle" value="2"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="dt[2]" value="1" disabled></td>
      <td class="text-center" width="5%"><input type="checkbox" name="ts[2]" value="1" disabled></td>
    </tr>
  </tbody>
</table>

edited Jul 9, 2018 at 8:40

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jul 9, 2018 at 8:13

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mplungjan Over a year ago

I would trigger the change onload too - as in my answer

irwan dwiyanto Over a year ago

Thanks it's solved and simple..bit weak me in jquery logic

mplungjan · Accepted Answer · 2018-07-09 08:32:29Z

You need to not use the disabled html attribute but trigger the change onload to set the initial state.

Note I find the other checkboxes in the same row instead of addressing them directly.

$(document).ready(function() {
  $('[name^=id]').on("change",function() {
    var checked = this.checked;
    $(this).closest("tr").find('[name^=dt]').prop('disabled', !checked);
    $(this).closest("tr").find('[name^=ts]').prop('disabled', !checked);
  }).trigger("change"); // trigger onload
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_employee" class="table table-striped table-bordered show-child-rows" style="width:100%">
  <thead>
    <tr>
      <th class="text-center" width="5%">ID</th>
      <th class="text-center" width="5%">DT</th>
      <th class="text-center" width="5%">TS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center" width="5%"><input type="checkbox" name="id[1]" value="1>"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="dt[1]" value="1"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="ts[1]" value="1"></td>
    </tr>
    <tr>
      <td class="text-center" width="5%"><input type="checkbox" name="id[2]" value="2>"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="dt[2]" value="2"></td>
      <td class="text-center" width="5%"><input type="checkbox" name="ts[2]" value="2"></td>
    </tr>
  </tbody>
</table>

thanks @mplungjan for helping me first answer above has overcome my problem, and your answer also true.

Collectives™ on Stack Overflow

Can not access checkbox by array in table with jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related