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>
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
remarks.attr('disabled',$(this).is(':checked'));
});
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.
Give class and id attribute to both of them, then hide show your textbox based on checked unchecked condition.
Try below code :
This is your html :
<td colspan="" width="15%" ><input type="checkbox" class=".txtcheck" name="check_approved[]" value="Checked"></td>
<td colspan="" width="10%" ><input type="text" class="form-control" id="txtbox" name="remarks[]" required></td>
This is your js code :
<script type="text/javascript">
function valueChanged()
{
if($('.txtcheck').is(":checked"))
$(".txtbox").show();
else
$(".txtbox").hide();
}
</script>
