У меня есть несколько динамических полей ввода и флажки, и я бы хотел отключить поле ввода, если флажок с одинаковым значением id проверен
Это код php:
<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>
Теперь я хотел бы отключить поля ввода, имеющие те же идентификаторы, что и флажки, если флажок установлен. Как мне пройти через это с помощью jquery
Как указано в моем комментарии, не разрешено иметь один и тот же идентификатор более чем на один элемент. Вы должны обновить идентификатор в строках, где вы назначаете $checkbox
и $textinput
чтобы $textinput
уникальные значения ID, что также поможет вам получить представленные значения на другом конце. Изменение их на что-то вроде id="chk_'.$m.'"
И id="txt_'.$m.'"
Было бы достаточно.
Кроме того, похоже, что вы не закрываете теги ввода. Добавьте />
в конец строк, где вы назначаете $checkbox
и $textinput
, или просто >
если не используете HTML 5.
После устранения этих проблем для вас будет работать следующий jquery:
$(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"); }); });