En este artículo, veremos cómo habilitar o deshabilitar las casillas de verificación anidadas en jQuery. Para hacer eso, seleccionamos todas las casillas de verificación secundarias y les agregamos atributos deshabilitados con la ayuda del método attr() en jQuery para que todas las casillas de verificación estén deshabilitadas.
Sintaxis:
// Select all child input of type checkbox
// with class child-checkbox
// And add the disabled attribute to them
$('.child-checkbox input[type=checkbox]')
.attr('disabled', true);
Después de eso, agregamos un detector de eventos de clic a la casilla de verificación principal, de modo que cuando hacemos clic en la casilla de verificación principal, si está marcada, todas sus casillas de verificación secundarias se habilitan. De lo contrario, todas las casillas de verificación secundarias se desactivarán.
A continuación se muestra la implementación de este enfoque:
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
How to enable or disable nested
checkboxes in jQuery?
</title>
<!-- Link of JQuery cdn -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<div class="parent-checkbox">
<input type="checkbox"> Govt. employe
</div>
<div class="child-checkbox">
<input type="checkbox"> ldc
<input type="checkbox"> clerk
<input type="checkbox"> watchmen
</div>
</div>
<script>
// Select child-checkbox classes all checkbox
// And add disabled attributes to them
$('.child-checkbox input[type=checkbox]').
attr('disabled', true);
// When we check parent-checkbox then remove disabled
// Attributes to its child checkboxes
$(document).on('click',
'.parent-checkbox input[type=checkbox]',
function (event) {
// If parent-checkbox is checked add
// disabled attributes to its child
if ($(this).is(":checked")) {
$(this).closest(".container").
find(".child-checkbox >
input[type=checkbox]").
attr("disabled", false);
} else {
// Else add disabled attrubutes to its
// all child checkboxes
$(this).closest(".container").
find(".child-checkbox >
input[type=checkbox]").
attr("disabled", true);
}
});
</script>
</body>
</html>
Producción:
Cuando la casilla de verificación principal se deshabilita:
Cuando la casilla principal está habilitada:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA