jQuery - casilla de verificación habilitar / deshabilitar

Tengo un montón de casillas de verificación como esta. Si la casilla de verificación "Verificar" está marcada, todas las otras 3 casillas de verificación deberían estar habilitadas, de lo contrario, deberían estar deshabilitadas. ¿Cómo puedo hacer esto usando 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>

Cambia ligeramente tu marcado:

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

Puede hacerlo utilizando selectores de atributos sin introducir el ID y las clases, pero es más lento y (en mi opinión) más difícil de leer.

Esta es la solución más actualizada.

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

Aquí están los detalles de uso para .attr()y.prop() .

jQuery 1.6+

Use la nueva .prop()función:

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

jQuery 1.5 y abajo

La .prop()función no está disponible, por lo que debe usar.attr() .

Para deshabilitar la casilla de verificación (al establecer el valor del atributo deshabilitado), haga

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

y para habilitar (eliminando el atributo por completo) hacer

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

Cualquier versión de jQuery

Si está trabajando con un solo elemento, siempre será más rápido de usar DOMElement.disabled = true. El beneficio de usar las funciones .prop()y .attr()es que funcionarán en todos los elementos coincidentes.

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

ref: ¿ Configuración "marcada" para una casilla de verificación con 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);
});

Con funcionalidad adicional para garantizar que la casilla de verificación marcar todos se marca / desmarca si todas las casillas de verificación individuales están marcadas:

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

Aquí hay otra muestra usando JQuery 1.10.2

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