Enable Disable Controls in a table row

Question

I would like to enable the edit&delete checkboxes of that row, when the respective chkView is checked and disable them if it is unchecked. This code is not firing at all

Answer 1

Try this:

$(document).on('change', '.chkView', function() {
    $(this).closest('tr').find('.chkEdit, .chkDelete').prop('disabled', !this.checked);
});

Demo: http://jsfiddle.net/75rVH/3/

Also for consistency sake if it's possible that some of .chkView load already checked you need to make sure you trigger change event on them to make corresponding edit and delete behave properly $('.chkView:checked').change(); (demo).

Answer 2

This is a pretty old question but to reflect best practice I am adding this.

This should attach the event handler as close as possible to the checkbox elements as we can to avoid traversing the entire DOM. Since we have an id, that will be the fastest and since it must be unique we can guarantee it is definitive.

It should also only target elements that are of the "checkbox" input type [type=checkbox] to protect from cases where a class might be added to other HTML such as the td, tr or even some element outside the scope of the table.

For completeness you might also consider "unchecking" the disabled elements - depending upon use I would expect that to often be the desired action inside a form you post for example, so I added that.

$('#table_forms').on('change', '.chkView[type=checkbox]', function(event) {
  // added to enable the uncheck on disable when they are checked
  let viewCheck = $(this);
  let isViewChecked = !!viewCheck.prop('checked');
  let isViewDisbled = !!viewCheck.prop('disabled');
  let rowChecks = viewCheck
    .closest('tr')
    .find('.chkEdit[type=checkbox], .chkDelete[type=checkbox]');

  // force view to unchecked if it is checked and disabled (optional depends on requirement, might not ever happen)
  viewCheck.filter(':checked').prop('checked', !isViewDisbled);
  // show if View is checked
  rowChecks.prop('disabled', isViewDisbled || (!isViewChecked && !isViewDisbled));
  // turn off checked if it is on and View is disabled 
  rowChecks.filter(function(index, checkbox) {
      return isViewDisbled || (!isViewChecked && $(checkbox).is(':checked'));
    })
    .prop('checked', false);

  // turn off checked if it is on and View is disabled
  rowChecks.filter(function(index, checkbox) {
    return isViewDisbled && $(checkbox).is(':checked');
  }).prop('checked', false);

}).find('.chkView[type=checkbox]').filter(function(index, element) {
  return !!$(element).siblings('input[type=checkbox]');
}).trigger('change'); // setup initial if they are disabled

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="table_forms">
  <tr>
    <td><input type="checkbox" class="chkView" checked disabled />View</td>
    <td><input type="checkbox" class="chkEdit" checked disabled/>Edit</td>
    <td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="chkView" />View</td>
    <td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
    <td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
  </tr>
</table>

Answer 3

$(document).on('change','.chkView',function(){
var row = $(this).closest('tr');
    if($(this).is(':checked'))
    {           
      $(row).find('.chkEdit,.chkDelete').prop("disabled",false);    
    }
    else
    {
      $(row).find('.chkEdit,.chkDelete').prop("disabled",true);     
    }
});

You are missing '.' in the selector class.

Demo:

http://jsfiddle.net/J6TN8/2/