jp remar serrano jp remar serrano - 19 days ago 5
Javascript Question

How to Enable/Disable Textbox per row in array using checkox

How to disable a textbox when checkbox is checked and enable it when checkbox has no check per row on a table in array.

Here is my code.

<tr>
<td colspan="1" width=""><?php echo $item_name;?></td>
<td colspan="" width="15%" ><input type="checkbox" name="check_approved[]" value="Checked"></td>
<td colspan="" width="10%" ><input type="text" class="form-control" name="remarks[]" required></td>
</tr>

Answer

You can easily traverse the parents to find the child without changing what you already have in your form html.

JSFiddle: https://jsfiddle.net/9cgntpzf/

$(document).ready(function(){
    // This will listen for changes on the checkbox
    $("input[name=check_approved\\[\\]]").on('change',function(){
        // This will then traverse upwards to the "tr", then find from the children
        // the corresponding "remarks" input
        var remarks =   $(this).parents('tr').find('input[name=remarks\\[\\]]');
        // This enables or disables the text box
        if($(this).is(':checked'))
            remarks.attr('disabled',true);
        else
            remarks.attr('disabled',false);
    });
});

One note, I am under the assumption that your example is one of many in a table, that is why I have given a general method to solve the problem. If you only have one instance on your page, using a unique id would be a more direct approach.