Question

我在PHP下面有网格视图的代码

<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

使用closest('tr')
使用find()
选择使用"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>

Answer 2

那么这样吗？

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

nextAll这里试图遍历下一个兄弟元素，输入元素位于第二个兄弟td内，所以使用eq(1)。

单击单选按钮启用输入框

2 个答案: