HTML Question

Disabling multiple input field if a checkbox is checked for dynamic inputs and reenable it if no

I have several dynamic input fields and checkboxes and i would like to disable the input box if the checkbox having a similar id value is checked

This is the php code:

<table class="table table-striped">

foreach ($checks as $m => $check) {
$item ="";
$checkbox ="";
$textinput ="";

if ($check->mandatory_customer == 1) { //mandatory customer checks
$displayx .="<i style='color:red;'>*</i>";
$item .= $check->item.$displayx;
$checkbox .='<input type="checkbox" class="1" id="'.$m.'"' ;
$textinput .='<input type="text" class="1" id="'.$m.'"' ;

} else { //not mandatory customer
$item .= $check->item;
$checkbox .='<input type="checkbox" class="0" id="'.$m.'"' ;
$textinput .='<input type="text" class="0" id="'.$m.'"' ;


echo "<tr id='" . $m . "'>";
echo "<td>" . $m . "</td>";
echo "<td>" . $item . "</td>";
echo "<td>".$checkbox."</td>";
echo "<td>".$textinput."</td>";
echo "</tr>";


Now i would like to disable the input boxes having the same id's as the checkboxes if the checkbox is checked. How do i go through this using jquery

Answer Source

As stated in my comment, it is not permitted to have the same ID on more than one element. You should update the ID on the lines where you assign $checkbox and $textinput so that unique ID values are assigned, which will also help you retrieve the submitted values on the other end. Changing them to something like id="chk_'.$m.'" and id="txt_'.$m.'" would be sufficient.

Also, it looks like you are not closing your input tags. Add /> to the end of the lines where you assign $checkbox and $textinput, or just > if not using HTML 5.

Once you've fixed those issues, the following jquery will work for you:

$(function() {
  $('input[type=checkbox]').change(function() {
    if (this.checked) {
        $(this).closest('tr').find('input[type=text]').prop('disabled', true);
    } else {
        $(this).closest('tr').find('input[type=text]').prop('disabled', false);