samedi 22 août 2015

Disable all checkboxes in tabular row

I want all checkboxes to be disabled on the row of a table once one is selected. As far as I can see the code should be working (there are no console errors). What am I doing wrong?

As an added complexity this same event listener may tick other checkboxes; ideally the rows containing any of these checkboxes that become checked should also be disabled.

(".chkbox").on('change', function() {

  var locked = false;
  // var for current row
  var row = $(this).closest('tr').index();

  var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');

  $(this).on('click', function toggleLock(e) {
    e.preventDefault();

    // Make locked true if it was false, or vice-versa
    locked = !locked;

    // And apply that value to the 'disabled' attribute of the checkboxes
    $checkboxes.attr('disabled', locked);
  });
});
<table border="1">
  <caption>
    <h5>Selection</h5>
  </caption>
  <tr id="9">
    <td>9.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

Aucun commentaire:

Enregistrer un commentaire