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

Question

I have two tables in one form. I use jquery to enable/disable the text fields of both table separately. But when I click on one radio it enables/disables both the table text. Please help. A portion of code:

<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>

The problem is that if i click on the first radio button "Option 1" of first table it enables text fields of both tables and if i click on the first radio button "Option 2" of first table it disables text fields of both tables. I want to do the same thing but separately.

Answer 1

you should give your tables class or id values end then add prop by them.

 <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>