禁用複選框基於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