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

Question

我想要禁用基于选择一个文本框的复选框，并启用禁用的复选框，如果复选框未选中。

在下面的代码中。如果有人检查项目成本下改变这个参数，然后复选框项目成本下这个PARAM 应该被禁用，所有下改变这个参数复选框生成模拟值的复选框应该除了检查一个被禁用。同样，这应该完成每个参数，如项目成本，平均工时，项目完成日期，小时率等

我可以想到的一种方法是点击功能禁用每个复选框的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

Answer 1

好的，所以如果#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'); 
    } 
}); 

Answer 2

如果您使用或者您的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