如何在jquery中启用/禁用特定表?

时间:2013-09-15 16:33:33

标签: javascript php jquery html html5

我有两个表格。我使用jquery分别启用/禁用两个表的文本字段。但是当我点击一个收音机时,它会启用/禁用两个表文本。请帮忙。代码的一部分:

<div class="inputradio1">
  <input type="radio" id="radio" required="required" class="detailradio1" name="select1" Value="Yes" />Option 1<br/>
  <input type="radio" id="radio1" required="required" class="detailradio1" name="select1" value="No" />Option 2 
  </div>
 <script type="text/javascript">
         $("table :text").prop("disabled", true);
         $(".inputradio1 input[name=select1]").change(function () {
             $("table :text").prop('disabled', $(this).val() === 'No');
         });
</script>
<table>
    here is some text fields
</table>


<div class="inputradio2">
    <input type="radio" id="rad" required="required" class="detailradio2" name="select2" Value="Yes" />Fill<br/>
    <input type="radio" id="rad1" required="required" class="detailradio2" name="select2" value="No" />Leave <br/>
 </div>
<script type="text/javascript">
    $("table :text").prop("disabled", true);
    $(".inputradio2 input[name=select2]").change(function () {
       $("table :text").prop('disabled', $(this).val() === 'No');
    });
</script>
<table>
  here is some text fields
</table>

问题是,如果我点击第一个表的第一个单选按钮“选项1”,它将启用两个表的文本字段,如果我点击第一个表的第一个单选按钮“选项2”,它将禁用文本字段两张桌子。我想分开做同样的事情。

1 个答案:

答案 0 :(得分:0)

你应该给你的表类或id值结束然后通过它们添加prop。

 <div class="inputradio1">
  <input type="radio" id="radio" required="required" class="detailradio1" name="select1" Value="Yes" />Option 1<br/>
  <input type="radio" id="radio1" required="required" class="detailradio1" name="select1" value="No" />Option 2 
  </div>
 <script type="text/javascript">
         $("table#table1 :text").prop("disabled", true);
         $(".inputradio1 input[name=select1]").change(function () {
             $("table#table1 :text").prop('disabled', $(this).val() === 'No');
         });
</script>
<table id='table1'>
    here is some text fields
</table>


<div class="inputradio2">
    <input type="radio" id="radio" required="required" class="detailradio1" name="select2" Value="Yes" />Fill<br/>
    <input type="radio" id="radio1" required="required" class="detailradio1" name="select2" value="No" />Leave <br/>
 </div>
<script type="text/javascript">
    $("table#table2 :text").prop("disabled", true);
    $(".inputradio2 input[name=select2]").change(function () {
       $("table#table2 :text").prop('disabled', $(this).val() === 'No');
    });
</script>
<table id="table2">
  here is some text fields
</table>