Question

我想根据一个文本框的选择禁用一组复选框，如果取消选中该复选框，则启用已禁用的复选框。

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

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

 <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>

由于 Prady

Answer 1

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

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

...将禁用name 以“foo”开头的所有复选框（所以，“foo1”，“foo2”，等等）。或者当然，你可以使用类等。

如果可以将其包含在table中，您可以提高效率：

$("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

Answer 2

好的，如果选中了 #chkBox ，那么你想要禁用所有“change”类复选框和同一行“sim”复选框。

$('#chkBox').click(function(){
   var paramChangeBoxes = $('input:checkbox.change');
   if ($(this).is(':checked')) {
      paramChangeBoxes.attr('disabled', 'disabled');
      $('#chkBox1').attr('disabled', 'disabled');
   }
  else {
      paramChangeBoxes.removeAttr('disabled');
      $('#chkBox1').removeAttr('disabled');
   }
});

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

2 个答案: