How to enable or disable nested checkboxes in jQuery ? - GeeksforGeeks

10 Dec, 2020
In this article, we will see how to enable or disable nested checkboxes in jQuery. To do that, we select all child checkboxes and add disabled attributes to them with the help of the attr() method in jQuery so that all checkboxes will be disabled.
Syntax:
// 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);
After that, we add a click event listener to the parent checkbox, so when we click on the parent checkbox, if it is checked, all of its child checkboxes become enable. Else it’s all child checkboxes become disable.
Below is the implementation of this approach :
Example:
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>
Output:
When parent checkbox disable:
When parent checkbox enable:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
Form validation using jQuery
Making a div vertically scrollable using CSS
CSS | :not(:last-child):after Selector
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)