jQuery - прапорець включити / відключити

У мене є купа таких прапорців. Якщо прапорець "Перевірити мене" встановлений, усі інші 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>

Трохи змінити розмітку:

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

Це можна зробити за допомогою селекторів атрибутів, не вводячи ідентифікатор та класи, але це повільніше і (що не важче) читати.

Це найсучасніше рішення.

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

ref: Установка "Позначено" для прапорця з 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);
});

З додатковою функціональністю для забезпечення встановлення прапорець усіх прапорців, якщо всі окремі прапорці встановлені:

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

Ось ще один зразок із використанням JQuery 1.10.2

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