samedi 16 avril 2016

Checkbox stops working after triggered manually

I've wrote this jQuery snippet to handle tr click, to add a bootstrap class to it and click the first checkbox in it.

$('body').on('change', '.select-all-children', function(e) {
  var checked = this.checked;

  $('.select-child').each(function() {
    $(this).prop('checked', checked);

    if(checked) {
      $(this).parent().parent().addClass('warning');
    } else {
      $(this).parent().parent().removeClass('warning');
    }
  });

});

$('body').on('click', '.table-selectable tbody tr', function(e) {
  var checkbox = $(this).find('.select-child');

  checkbox.click();

  var checked = checkbox[0].checked;

  if(checked) {
    $(this).addClass('warning');
  } else {
    $(this).removeClass('warning');
  }
});

$('body').on('change', '.select-child', function(e) {
  var checked_total = $('.select-child:checked').length;

  if(checked_total == $('.select-child').length) {
    $('.select-all-children').prop('checked', true);
  } else {
    $('.select-all-children').prop('checked', false);
  }
});

Whenever I click on the tr and thus trigger this call:

checkbox.click();

I cannot click on the checkbox no more, but the tr click works fine.

This is my HTML markup of the table:

<table class="table table-selectable">
  <thead>
    <tr>
      <th>
        <input type="checkbox" class="select-all-children">
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <tr>
        <td>
          <input type="checkbox" class="select-child">
        </td>
      </tr>
    </tr>
  </tbody>
</table>

Aucun commentaire:

Enregistrer un commentaire