jQuery - 復選框啟用/禁用

Question

我有一堆這樣的復選框。 如果選中“Check Me”復選框，則應啟用所有其他 3 個復選框，否則應禁用它們。 我如何使用 jQuery 做到這一點？

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>

Answer 1

稍微更改您的標記：

 $(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { if (this.checked) { $("input.group1").removeAttr("disabled"); } else { $("input.group1").attr("disabled", true); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="frmChkForm" id="frmChkForm"> <input type="checkbox" name="chkcc9" id="group1">Check Me <br> <input type="checkbox" name="chk9[120]" class="group1"><br> <input type="checkbox" name="chk9[140]" class="group1"><br> <input type="checkbox" name="chk9[150]" class="group1"><br> </form>

您可以使用屬性選擇器來做到這一點，而無需引入 ID 和類，但它更慢且（恕我直言）更難閱讀。

Answer 2

這是最新的解決方案。

<form name="frmChkForm" id="frmChkForm">
    <input type="checkbox" name="chkcc9" id="group1" />Check Me
    <input type="checkbox" name="chk9[120]" class="group1" />
    <input type="checkbox" name="chk9[140]" class="group1" />
    <input type="checkbox" name="chk9[150]" class="group1" />
</form>

$(function() {
    enable_cb();
    $("#group1").click(enable_cb);
});

function enable_cb() {
    $("input.group1").prop("disabled", !this.checked);
}

---

這是.attr()和.prop()的使用細節。

jQuery 1.6+

使用新的.prop()函數：

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

jQuery 1.5 及以下

.prop()函數不可用，因此您需要使用.attr() 。

要禁用復選框（通過設置禁用屬性的值），請執行

$("input.group1").attr('disabled','disabled');

並啟用（通過完全刪除屬性）做

$("input.group1").removeAttr('disabled');

任何版本的 jQuery

如果您只使用一個元素，那么使用DOMElement.disabled = true總是最快的。 使用.prop()和.attr()函數的好處是它們將對所有匹配的元素進行操作。

// Assuming an event handler on a checkbox
if (this.disabled)

參考： 使用 jQuery 為復選框設置“已選中”？

Answer 3

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>

$("#chkAll").click(function() {
   $(".chkGroup").attr("checked", this.checked);
});

添加了功能以確保在選中所有單個復選框時選中/取消選中所有復選框：

$(".chkGroup").click(function() {
  $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});

Answer 4

 $(document).ready(function() { $('#InventoryMasterError').click(function(event) { //on click if (this.checked) { // check select status $('.checkerror').each(function() { //loop through each checkbox $('#selecctall').attr('disabled', 'disabled'); }); } else { $('.checkerror').each(function() { //loop through each checkbox $('#selecctall').removeAttr('disabled', 'disabled'); }); } }); }); $(document).ready(function() { $('#selecctall').click(function(event) { //on click if (this.checked) { // check select status $('.checkbox1').each(function() { //loop through each checkbox $('#InventoryMasterError').attr('disabled', 'disabled'); }); } else { $('.checkbox1').each(function() { //loop through each checkbox $('#InventoryMasterError').removeAttr('disabled', 'disabled'); }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="selecctall" name="selecctall" value="All" /> <input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" /> <input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" /> <input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />

Answer 5

這是使用 JQuery 1.10.2 的另一個示例

$(".chkcc9").on('click', function() {
            $(this)
            .parents('table')
            .find('.group1') 
            .prop('checked', $(this).is(':checked')); 
});

Answer 6

 $jQuery(function() { enable_cb(); jQuery("#group1").click(enable_cb); }); function enable_cb() { if (this.checked) { jQuery("input.group1").removeAttr("disabled"); } else { jQuery("input.group1").attr("disabled", true); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="frmChkForm" id="frmChkForm"> <input type="checkbox" name="chkcc9" id="group1">Check Me <br> <input type="checkbox" name="chk9[120]" class="group1"><br> <input type="checkbox" name="chk9[140]" class="group1"><br> <input type="checkbox" name="chk9[150]" class="group1"><br> </form>