jQuery禁用div的多个输入子项答案

【问题标题】：jQuery disable multiple input children of a divjQuery禁用div的多个输入子项
【发布时间】：2011-01-20 14:00:52
【问题描述】：

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

每一行都有一个复选框，当单击该复选框时，我想禁用具有 .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);
}

【问题讨论】：

正确的是 attr('disabled', 'disabled')。但是不确定这是否会导致问题。
@holden：你的措辞让我有点困惑。标题是“div 的子级”，而您的问题是“连续输入字段”。我们是在谈论堆叠的 div 还是表格行？
@holden：另外，(div|tr) 是否具有类名“room”，或者 (div|tr) 中的输入字段是否有？也许你应该只发布你的 HTML。
和你下面贴的差不多，我只是稍微修改了你的js，效果很好。

标签： jquery input jquery-selectors children

【解决方案1】：

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

点击后，您应该遍历到最近的表格行，找到所有类名为 .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

【讨论】：

@holden：我猜是幸运的 :) 很高兴我能帮上忙。