Enable disable controls in a row of a table

Question

I would like to enable the edit & delete flags of this line when the corresponding chkView is checked and disabled if it is not set. Firstly, this code does not work. Where am I going wrong.

http://jsfiddle.net/75rVH/1/

HTML

<table id="table_forms">
    <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>
   <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>

JS:

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

});

Answer 1

$(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);     
    }
});

The class selector is not .. .

Demo:

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

Answer 2

Try it:

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

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

, , .chkView , , , $('.chkView:checked').change(); (demo).

Answer 3

, , , .

, DOM. , , , .

It should also be intended only for elements that have a check box input type [type=checkbox], to protect against cases when the class can be added to other HTML, such as td, tror even some element outside the scope of the table.

For completeness, you can also consider “unchecking” the disabled elements - depending on the use, I expect that this will often be the desired action inside the form that you publish, for example, so I added this.

$('#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>

Run codeHide result