jQuery - hộp kiểm bật / tắt

Tôi có một loạt các hộp kiểm như thế này. Nếu hộp kiểm "Kiểm tra tôi" được chọn, tất cả 3 hộp kiểm khác sẽ được bật, nếu không chúng sẽ bị tắt. Làm thế nào tôi có thể làm điều này bằng cách sử dụng 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>

Thay đổi đánh dấu của bạn một chút:

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

Bạn có thể thực hiện việc này bằng cách sử dụng các bộ chọn thuộc tính mà không cần giới thiệu ID và các lớp nhưng nó chậm hơn và (imho) khó đọc hơn.

Đây là giải pháp cập nhật nhất.

<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);
}

Dưới đây là chi tiết sử dụng cho .attr()và.prop() .

jQuery 1.6+

Sử dụng .prop()chức năng mới :

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

jQuery 1.5 trở xuống

Các .prop()chức năng không có sẵn, vì vậy bạn cần phải sử dụng.attr() .

Để tắt hộp kiểm (bằng cách đặt giá trị của thuộc tính bị tắt), hãy làm

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

và để cho phép (bằng cách loại bỏ hoàn toàn thuộc tính), hãy làm

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

Mọi phiên bản của jQuery

Nếu bạn đang làm việc chỉ với một yếu tố, nó sẽ luôn được sử dụng nhanh nhất DOMElement.disabled = true. Lợi ích của việc sử dụng .prop()và các .attr()chức năng là chúng sẽ hoạt động trên tất cả các yếu tố phù hợp.

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

ref: Đặt "kiểm tra" cho hộp kiểm với jQuery?

<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);
});

Với chức năng được thêm vào để đảm bảo kiểm tra tất cả các hộp kiểm được kiểm tra / kiểm tra lại nếu tất cả các hộp kiểm riêng lẻ được chọn:

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

Đây là một mẫu khác sử dụng JQuery 1.10.2

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