Question

我正在尝试在为该行选中复选框时禁用相邻列的输入类型。我尝试过以下但无法禁用。请查看并建议如何禁用。

$("input:checkbox[class=associationcheckbox]").each(function() {
  var index;
  $(this).on('click', function() {
    if ($(this).prop('checked')) {
      $(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false);
    } else {
      $(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <table>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
  </table>
</body>
</html>

Answer 1

你的选择者到处都是。类的情况需要匹配，您不需要each()，并且您尝试按td的类选择input，这将永远不会有效。您还在disabled条件的两侧将false设置为if，但我认为这只是一个错字。

要实现所需，您只需按类添加一个单击处理程序，然后找到它的相关文本框，并根据checked属性将其设置为禁用/启用。试试这个：

$(".associationCheckbox").on('click', function() {
    $(this).closest('tr').find('.associationCheckbox1').prop("disabled", this.checked);
});

<!DOCTYPE html>
<html>
<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
  <h1>Hello Plunker!</h1>
  <table>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
  </table>
</body>

</html>

我还建议您更改文本框的类，因为associationCheckbox1有点令人困惑。

无法从桌子排扰乱兄弟姐妹

1 个答案: