Mark onclick Checkboxes on the left

Question

I have this perms mannaging form to set up perms for the users. The idea I have is:

When "Manage" is selected, view/edit/lend gets selected aswell and disabled.
If any of the others get selected, the rest in the left side should get selected and disabled aswell.

The idea is that users can't select edit but not view, or lend but not edit... and so on... but if for example Edit gets selected, lend doesnt and view does.

Code Snippet:

$('.manage_check').on('change',function(){
  $(this).parents('.perms-group').find('input[type="checkbox"]:not(".manage_check")').click();
  $(this).parents('.perms-group').find('input[type="checkbox"]:not(".manage_check")').prop("disabled",true);
});









    
        
            
              Users:
              
                  
                      
                          
                              
                                  View:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                          
                              
                                  Edit:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                      
                      
                      
                      
                      
                      
                          
                              
                                  Manage:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                  
              
              Library:
              
                  
                      
                          
                              
                                  View:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                          
                              
                                  Edit:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                          
                              
                                  Lend:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                      
                      
                      
                      
                          
                              
                                  Manage:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                  
              
              Text Books:
              
                  
                      
                          
                              
                                  View:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                          
                              
                                  Edit:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                          
                              
                                  Lend:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                      
                      
                      
                      
                          
                              
                                  Manage:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                  
              
              Teacher Books:
              
                  
                      
                          
                              
                                  View:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                          
                              
                                  Edit:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                          
                              
                                  Lend:
                              
                              
                                  
                                    
                                        
                                        
                                    
                                
                              
                          
                          
                      
                      
                      
                      
                      
                      
                          
                              
                                  Manage:

The question would be:

How can I set to disable all perms when "Manage" of a section is checked?
How can I check and disable view when edit or lend is selected?.

2nd Bullet explained:

If you select "view" -> View gets selected as normal.
If you select "edit" -> view gets selected and disabled.
If you select "Lend" -> view/edit get selected and disabled.
If you select "Manage" -> view/edit/lend get selected and disabled.

It should be toggeable also, so when unselecting it, it unchecks and enable the switchers back. Also, as the function to select does .click(), if you select view and then select "manage", it unchecks view and checks edit. It should always check, not .click, when selecting "Manage"

PD: This comes from another post I made today, but since I already closed it, though would be better to create a new one with the new issue.

user_2191976 · Answer

You might need to adjust this solution to fit your current markup. I tried to make it generic to look easier to understand.

Assuming you use this markup:


  
    Users
  
  View
  
  Edit
  
  Manage
  


  
    Library
  
  View
  
  Edit
  
  Lend
  
  Manage
  


  
    Text Books
  
  View
  
  Edit
  
  Lend
  
  Manage
  


  
    Teacher Books
  
  View
  
  Edit
  
  Lend
  
  Manage

The key here is to link the checkboxes in groups. I used a data-group attribute.

Then you can have something on these lines on your JavaScript (jQuery) code:

$(function() {
  // By having a set of rules defined like this it makes it easier for you to expand them
  const ruleSet = [{
      checked: "manage",
      checkAndDisable: ["view", "edit", "lend"]
    },
    {
      checked: "view",
      checkAndDisable: []
    },
    {
      checked: "edit",
      checkAndDisable: ["view"]
    },
    {
      checked: "lend",
      checkAndDisable: ["view", "edit"]
    }
  ];

  const toggleElementsCheck = (elements, toggle) => {
    elements.each(function() {
      $(this).prop("checked", toggle);
    })
  };

  const toggleElementsDisable = (elements, toggle) => {
    elements.each(function() {
      $(this).prop("disabled", toggle);
    })
  };

  $("input[type=checkbox]").on("click", function() {
    // Which data-group the clicked checkbox belongs into?
    const group = $(this).data("group");

    // What are the other checkboxes in this group?
    const checkboxes = $("input[data-group=" + group + "]").not($(this));

    // What's the value of the clicked checkbox?
    const value = $(this).val();

    // What are the rules for this group of checkboxes?
    const rule = ruleSet.find(x => x.checked === value);

    // What are the values of the checkboxes that need manipulation on this group?
    const checkAndDisable = rule.checkAndDisable;

    // Does this click represents a "check" or an "uncheck"?
    const isChecked = $(this).is(":checked");

    // Loop through the checkboxes in this group and manipulate them accordingly
    $(checkboxes).each(function() {
      let value = $(this).val();
      let toggle = checkAndDisable.includes(value);

      toggleElementsCheck($(this), isChecked ? toggle : false);
      toggleElementsDisable($(this), isChecked ? toggle : false);
    });
  });
});

Working example - JSFiddle

Mark onclick Checkboxes on the left

1 Answers