Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to enable or disable nested checkboxes in jQuery ?

  • Last Updated : 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.


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

// 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 :



<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
        How to enable or disable nested
        checkboxes in jQuery?
    <!-- Link of JQuery cdn -->
    <script src=
    <div class="container">
        <div class="parent-checkbox">
            <input type="checkbox"> Govt. employe
        <div class="child-checkbox">
            <input type="checkbox"> ldc
            <input type="checkbox"> clerk
            <input type="checkbox"> watchmen
        // 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
            '.parent-checkbox input[type=checkbox]',
            function (event) {
                // If parent-checkbox is checked add 
                // disabled attributes to its child
                if ($(this).is(":checked")) {
                        find(".child-checkbox > 
                        attr("disabled", false);
                } else {
                    // Else add disabled attrubutes to its 
                    // all child checkboxes  
                        find(".child-checkbox > 
                        attr("disabled", true);


When parent checkbox disable:

When parent checkbox enable:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!