Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enable Disable Controls in a table row

Tags:

jquery

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 in the first place. 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);
    }

});
like image 928
Ruby Avatar asked Jan 10 '23 22:01

Ruby


1 Answers

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).

like image 114
dfsq Avatar answered Jan 25 '23 13:01

dfsq