Javascript 基于在jquery中选择另一个复选框禁用复选框

我想在选中一个文本框的基础上禁用一组复选框，如果复选框未选中，则启用禁用的复选框

在下面的代码中。如果有人选中“更改此参数”下的“项目成本”复选框，则选中“为该参数生成模拟值”下的“项目成本”复选框 应禁用，更改此参数下的所有复选框均应禁用，但选中的复选框除外。类似地，每个参数（如项目成本、平均小时数、项目完成日期、小时费率等）都应这样做

我能想到的一种方法是在单击功能上按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>

更改此参数
为该参数生成模拟值
工程造价
平均小时数
工程完成日期
小时费率

谢谢

---

Prady

如果对

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支持几乎所有的CSS3，然后是一些）

或者，我无法从您的问题（您似乎提到了未在给定标记中显示的复选框），但如果您要操作的所有复选框都与单击的复选框位于同一表行中，则可以在该行中使用遍历来查找要启用/禁用的复选框

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

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

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

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

});


此选项将执行相同的操作，但跳过已选中的任何复选框：

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

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

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

});

如果对
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支持几乎所有的CSS3，然后是一些）

或者，我无法从您的问题（您似乎提到了未在给定标记中显示的复选框），但如果您要操作的所有复选框都与单击的复选框位于同一表行中，则可以在该行中使用遍历来查找要启用/禁用的复选框

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

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

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

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

});


此选项将执行相同的操作，但跳过已选中的任何复选框：

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

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

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

});

好，如果选中了#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');
   }
});

好的，如果选中了#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');
   }
});

我愿意使用单选按钮，如果它最适合，但我需要用户只能在标题“更改此参数”和“生成此参数的模拟值”下选择一个参数，并且不能为同一行选择这两个参数。我愿意使用单选按钮，如果它最适合，但我需要用户只能在标题下选择一个参数“更改此参数”和“生成此参数的模拟值”“不能为同一个项目同时选择这两个项目row@TJ我不确定我是否理解你提到的选择表的东西。你是说我需要给表指定一个id，然后只在该表中搜索复选框名称吗？@Prady:不一定是
id
，尽管这样做可以。只要有一个CSS3选择器可以用来标识表，它是否是
id
选择器、结构选择器等都无关紧要。从您的示例来看，理想情况下，我需要的是，如果我选中一个复选框，则选中列中的所有复选框都将被禁用，并且选中复选框行中的所有复选框也将被禁用。我可以从您的代码中了解如何对行执行此操作，在columns@TJ我不确定我是否理解你提到的选择表的东西。你是说我需要给表指定一个id，然后只在该表中搜索复选框名称吗？@Prady:不一定是
id
，尽管这样做可以。只要有一个CSS3选择器可以用来标识表，它是否是
id
选择器、结构选择器等都无关紧要。从您的示例来看，理想情况下，我需要的是，如果我选中一个复选框，则选中列中的所有复选框都将被禁用，并且选中复选框行中的所有复选框也将被禁用。我可以从您的代码中了解如何对行执行此操作，是否可以对列执行类似操作。我尝试过这样做，但我无法使其正常工作。您可以在这里看到它已排序，在if（$（this）.is（':checked'）{我尝试了这样做，但我无法使它正常工作。您可以在这里看到它已排序，在checked）中有一个缺少的'）'在if（$（this）.is（':checked'）中{