javascript - 单击单选按钮时启用输入框

Question

我有以下 PHP GridView 代码

<table>
  <tr>
    <td>
     <input type="radio" name="planId" id="planId1" value="1">
     <label for="planId1">Plan 1</label>
  </td>
  <td>$5 <label>per month</label></td>
  <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
</tr>
<tr>
  <td>
     <input type="radio" name="planId" id="planId2" value="1">
     <label for="planId1">Plan 2</label>
  </td>
  <td>$5 <label>per month</label></td>
  <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId2" min="1" maxlength="2" value="1" disabled></td>
</tr>
<tr>
  <td>
     <input type="radio" name="planId" id="planId3" value="1">
     <label for="planId1">Plan 3</label>
  </td>
  <td>$5 <label>per month</label></td>
  <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
 </tr>
 </table>

根据数据库数据，上面的'tr'可以是多个。我的要求是，每当我单击单选按钮时，禁用的输入文本字段应该为 false。

请告诉我如何实现这一点，行数最多可达 10 行。下面是我编写的脚本

$('input:radio').change(function() {
   if($(this).is(":checked")) 
        $(this).parent().find("input:text").attr("disabled",false);
});

Answer 1

1. 使用closest('tr')
2. 使用find()时使用输入的类
3. 要选择号码类型，请使用“input[type=number]”

$('input:radio').change(function() {

  if ($(this).is(":checked"))
  $(this).closest('table').find("input[type=number]").not(this).attr("disabled", true);
    $(this).closest('tr').find("input[type=number]").attr("disabled", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="radio" name="planId" id="planId1" value="1">
      <label for="planId1">Plan 1</label>
    </td>
    <td>$5 <label>per month</label></td>
    <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="planId" id="planId2" value="1">
      <label for="planId1">Plan 2</label>
    </td>
    <td>$5 <label>per month</label></td>
    <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId2" min="1" maxlength="2" value="1" disabled></td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="planId" id="planId3" value="1">
      <label for="planId1">Plan 3</label>
    </td>
    <td>$5 <label>per month</label></td>
    <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
  </tr>
</table>