如果选中动态输入的复选框,则禁用多个输入字段,否则重新启用它

时间:2016-10-12 16:39:49

标签: javascript php jquery html checkbox

我有几个动态输入字段和复选框,如果选中具有类似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>

   

现在,如果选中该复选框,我想禁用具有相同ID的输入框作为复选框。我如何使用jquery

进行此操作

2 个答案:

答案 0 :(得分:1)

如我的评论所述,不允许在多个元素上使用相同的ID。您应该在分配>>> timeit.timeit(setup='ba=bytearray()', stmt='ba.extend(b"xyz123")', number=1000000) 0.19515220914036036 >>> timeit.timeit(setup='ba=bytearray()', stmt='ba += b"xyz123"', number=1000000) 0.09053478296846151 $checkbox的行上更新ID,以便分配唯一的ID值,这也有助于您在另一端检索提交的值。将它们更改为$textinputid="chk_'.$m.'"就足够了。

此外,您似乎没有关闭输入标签。将id="txt_'.$m.'"添加到您指定/>$checkbox的行的末尾,如果不使用HTML 5则添加$textinput

一旦解决了这些问题,以下jquery将适合您:

>

演示: https://jsfiddle.net/BenjaminRay/nnphq559/

答案 1 :(得分:-1)

    $(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");
        });
    });