jQuery 禁用 div 的多个输入子项

发布于 2024-08-22 23:50:56 字数 355 浏览 3 评论 0原文

我想从复选框执行如下操作，

每行都有一个复选框，并且我想在单击该复选框时禁用 .room 类的行上的所有输入字段。

function toggleStatus(link) {
    $(link).closest(".room").children(':input').attr('disabled', true);
}

也尝试过

function toggleStatus(link) {
    $(link).closest(".room").children('input[type=text]').attr('disabled', true);
}

原文

I want do do something like below from a checkbox,

There's a checkbox on every row, and I'd like to disable all the input fields on a row with the class .room when the checkbox is clicked.

function toggleStatus(link) {
    $(link).closest(".room").children(':input').attr('disabled', true);
}

also tried

function toggleStatus(link) {
    $(link).closest(".room").children('input[type=text]').attr('disabled', true);
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

思念绕指尖 2024-08-29 23:50:56

您的问题有些含糊不清，因此以下内容可能不完全是您要查找的内容。

单击后，您应该遍历到最近的表行，找到具有类名 .room 的所有输入，并根据复选框本身的状态设置其禁用属性。

$(":checkbox").click(function(){
  $(this).closest("tr").find(":input.room")
    .attr("disabled", $(this).is(":checked"));
});

其结构类似于以下内容：

<table>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
    </tr>
  </tbody>
</table>

在线演示：http://jsbin.com/umimu/edit

Your question has some ambiguities, so the following may not be exactly what you're looking for.

Upon click, you should traverse up to the nearest table-row, find all inputs having the classname .room and set their disabled-attribute according to the status of the checkbox itself.

$(":checkbox").click(function(){
  $(this).closest("tr").find(":input.room")
    .attr("disabled", $(this).is(":checked"));
});

This assumes a structure similar to that which follows:

<table>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
    </tr>
  </tbody>
</table>

Online Demo: http://jsbin.com/umimu/edit

回复收藏 0 原文

~没有更多了~