javascript - 根据jquery中另一个复选框的选择禁用复选框

Question

我想根据选择一个文本框禁用一组复选框，并在未选中该复选框时启用禁用的复选框。

在下面的代码中。如果有人选中更改此参数下的项目成本复选框，则选中为此参数生成模拟值下的项目成本复选框应禁用，并且除选中的复选框外，更改此参数下的所有复选框均应禁用。同样，应该对每个参数进行此操作，例如项目成本、平均工时、项目完成日期、每小时费率等。

我能想到的一种方法是在点击功能上通过 ID 禁用每个复选框。有更好的方法吗？

 <table>
<tr>
 <td></td>
 <td></td>
  <td>Change this parameter</td>
  <td>Generate simulated value for this param</td>

 </tr>
 <tr>
  <td>Project cost</td>
  <td><input type ="text" id ="pc"/></td>
  <td><input class="change" type="checkbox" name="chkBox" id="chkBox"></input></td>
  <td><input class="sim" type="checkbox" name="chkBox1" id="chkBox1"></input></td>

   </tr>
<tr>
<td>Avg hours</td>
<td><input type ="text" id ="avghrs"/></td>
<td><input class="change" type="checkbox" name="chkBoxa" id="chkBoxa"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1a" id="chkBox1a"></input></td>

</tr>

<tr>
<td>Project completion date</td>
<td><input type ="text" id ="cd"/></td>
<td><input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1b" id="chkBox1b"></input></td>

</tr>
<tr>
<td>Hourly rate</td>
<td><input type ="text" id ="hr"/></td>
<td><input class="change" type="checkbox" name="chkBoxc" id="chkBoxc"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1c" id="chkBox1c"></input></td>

</tr>
</table>

谢谢普拉迪

Answer 1

如果您对 id 或 name 属性使用命名约定，则可以使用各种属性子字符串选择器来选择复选框。例如:

$(":checkbox[name^=foo]").attr("disabled", true);

...将禁用所有名称以“foo”开头的复选框(例如“foo1”、“foo2”等)。或者当然，您可以使用类等。

如果您可以将其包含到表中，您也许可以提高效率:

$("selector_for_table").find(":checkbox[name^=foo]").attr("disabled", true);

例如，如果您向表格添加了一个“checkboxTable”id:

$("#checkboxTable").find(":checkbox[name^=foo]").attr("disabled", true);

有关属性选择器的更多信息:

• jQuery docs
• CSS3 docs (jQuery 支持几乎所有 CSS3，然后是一些)

或者，我不能完全从你的问题中看出(你似乎提到了给定标记中没有显示的复选框)，但是如果你想要操作的所有复选框都是在与单击的表行相同的表行中，您可以使用行内遍历来查找要启用/禁用的复选框。

例如，此 change 处理程序将禁用与触发事件的同一表行上的所有其他复选框:

$("selector_for_checkboxes").change(function() {

  var $this = $(this),
      row = $this.parents("tr");

  row.find(":checkbox").not($this).attr("disabled", this.checked);

});

Live copy

这个会做同样的事情，但会跳过任何已经选中的复选框:

$(":checkbox").change(function() {

  var $this = $(this),
      row = $this.parents("tr");

  row.find(":checkbox:not(:checked)").not($this).attr("disabled", this.checked);

});

Live copy