如何启用或禁用 jQuery 中的嵌套复选框？

在本文中，我们将看到如何在 jQuery 中启用或禁用嵌套复选框。为此，我们选择所有子复选框并在 jQuery 中的 attr()方法的帮助下向它们添加禁用属性，以便禁用所有复选框。

句法：

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

之后，我们给父复选框添加了一个点击事件监听器，所以当我们点击父复选框时，如果它被选中，它的所有子复选框都变为启用。否则，所有子复选框都将被禁用。

下面是这种方法的实现：

例子：

HTML

  

    
  
    
        How to enable or disable nested
        checkboxes in jQuery?
    
  
    
    
    

  

    
        
             Govt. employe
        
        
             ldc
             clerk
             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
        $(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);
                }
            });
    

  

输出：

当父复选框禁用时：

当父复选框启用时：