lundi 27 novembre 2017

Cannot check all table rows on second time

I have a HTML table where I display some data. I have a problem when trying to do multiple selection.

If I click the checkbox on <th> (which selects all rows), all checkboxes in tbody > tr are selected - as expected. I click again and all deselect - as expected. If I click again the th checkbox it doesn't select anything inside tbody. How can I fix this issue?

$(document).ready(function() {
  toggleDeleteButton = function() {
    // alert($('.selector:checked').length);

    if ($('.selector:checked').length) {
      $('.btn-delete-selected').removeClass('disabled');
    } else {
      $('.btn-delete-selected').addClass('disabled');
    }
  }
  
  function update_selection(obj) {
    var state = obj.checked;
    if (state === undefined) {
      state = false;
    }
    $(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state);
  }
});
<script src="http://ift.tt/1oMJErh"></script>
<table class="table">
  <thead>
    <tr>
      <th class=""><input onchange="update_selection(this); toggleDeleteButton();" type="checkbox"></th> // Selecting all
      <th class="">
        <a href="#">#</a>
      </th>
      <th class="">
        <a href="#">Data #1</a>
      </th>
      <th class="">
        <a href="#">Data #2</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">3</td>
      <td class="text-right">£ 1.00</td>
      <td class="center">Foo</td>
    </tr>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">4</td>
      <td class="text-right">£ 2.50</td>
      <td class="center">FooBar</td>
    </tr>
    <tr class="tr even incomplete ">
      <td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td>
      <td class="center">5</td>
      <td class="text-right">£ 3.00</td>
      <td class="center">Bar</td>
    </tr>
  </tbody>
</table>



Aucun commentaire:

Enregistrer un commentaire