如果选中动态输入的复选框，则禁用多个输入字段，否则启用它
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">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
foreach ($checks as $m => $check) {
$item ="";
$checkbox ="";
$textinput ="";
$displayx="";
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>";
}
?>
}
</tbody>
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
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);
}
});
});
$(document).ready(function () {
$(":checkbox").on("change", function () {
if ($(this).prop("checked"))
$(":text#"+$(this).attr("id")).prop("disabled", "disabled");
else
$(":text#" + $(this).attr("id")).removeAttr("disabled");
});
});