Jquery Checkbox Assign Multiple Permissions to a Role
Tags: javascript, jquery, jqueryplugin, tutorial
Published: 2022-05-16 07:40:06

Originally posted @ https://codeanddeploy.com visit and download the sample code:
https://codeanddeploy.com/blog/jquery/jquery-checkbox-assign-multiple-permissions-to-a-role

In this post, I will share a simple code on how to implement a jquery checkbox to assign multiple permissions to a role. In case you are implementing multiple permissions with a checkbox to a role then this post might help you.

 

Previously, I posted about how to implement the jQuery `TableCheckAll` plugin which I created. You can visit [here the previous post](https://codeanddeploy.com/blog/jquery-plugins/jquery-table-check-all-plugin).


![jquery-checkbox](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/jquery-checkbox-assign-multiple-permissions-to-a-role-QhC0VibghJx980.webp?ctm=1649137445)

Okay, you have the idea already what is the expected output. Let's process how to do it.

 

## First, Clone the TableCheckAll jquery Plugin.

```php
git clone https://github.com/codeanddeploy/Jquery-Table-Check-All-Plugin.git
```

Once you downloaded it, create a new file inside the folder you downloaded. Let's say `index.html` then paste the code below:

 

## Second, Here is the full source code
In this section, we have a sample source code that can implement to your project.

 

Take note: The `.select-all-permissions` and `.select-permission` classes are able to select all modules permissions. So you don't need to replace these classes.

 

For `.select-permission` class, you need to add this in every module permission checkbox including the module select all permission checkbox. As you can see in this code:

 

```php
<tr>
  <th scope="row">Clients</th>
  <td><input type="checkbox" class="select-permission select-all-module-permissions select-all-client-permissions" data-class="select-all-client-permissions"> Select All</td>
  <td><input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Create Client <input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Edit Client</td>
</tr>
```

To trigger the module permission we need also to add class `.select-module-permission` and specific class for each module permission with custom attribute `data-class="select-{module_name}-permission"` and class name .`select-{module_name}-permission`.

 

Take note that the `{module_name}` is your module name without space.

 

Then in each module select all checkbox. You need to add `.select-all-module-permissions` class name. Because we use this to loop all available modules.

 

Then next we will add a custom attribute `data-class="select-all-{module_name}-permissions"` and add a class `.select-all-{module_name}-permissions` in each module select all checkbox.

 

Here is the full source code.

```php
<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Jquery Checkbox Assign Multiple Permissions to a Role - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="dist/TableCheckAll.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                var tableSelector = '#permissions-table';

                $.each( $( '.select-all-module-permissions' ).parents('tr'), function() {
                  var that = $(this);
                  var selectAllPermissionsClass = that.find('.select-all-module-permissions').attr('data-class');

                  $.each(that.find('.select-module-permission'), function() {
                    var selectPermissionClass = $(this).attr('data-class');

                    $( tableSelector ).TableCheckAll({
                      checkAllCheckboxClass: '.' + selectAllPermissionsClass,
                      checkboxClass: '.' + selectPermissionClass
                    });
                  });
                  
                });

                $( tableSelector ).TableCheckAll({
                    checkAllCheckboxClass: '.select-all-permissions',
                    checkboxClass: '.select-permission'
                });

            });
        </script>
    </head>

    <body>
        <div class="container mt-5">

          <form>

            <div class="form-group"> 
              <label>Role</label>
              <input type="text" class="form-control">
            </div><br><br>
            

            <h3>Assign Permissions</h3>
            <table class="table table-striped" id="permissions-table">
              <thead>
                <tr>
                  <th scope="col">Module</th>
                  <th scope="col"><input type="checkbox" class="select-all-permissions"> Select All</th>
                  <th scope="col">Available Permissions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">Clients</th>
                  <td><input type="checkbox" class="select-permission select-all-module-permissions select-all-client-permissions" data-class="select-all-client-permissions"> Select All</td>
                  <td><input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Create Client <input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Edit Client</td>
                </tr>
                <tr>
                  <th scope="row">Blogs</th>
                  <td><input type="checkbox" class="select-permission select-all-module-permissions select-all-blogs-permissions" data-class="select-all-blogs-permissions"> Select All</td>
                  <td><input type="checkbox" class="select-permission select-module-permission select-blogs-permission" data-class="select-blogs-permission"> Create Blog <input type="checkbox" class="select-permission select-module-permission select-blogs-permission" data-class="select-blogs-permission"> Edit Blog</td>
                </tr>
                <tr>
                  <th scope="row">Users</th>
                  <td><input type="checkbox" class="select-permission select-all-module-permissions select-all-users-permissions" data-class="select-all-users-permissions"> Select All</td>
                  <td><input type="checkbox" class="select-permission select-module-permission select-users-permission" data-class="select-users-permission"> Create User <input type="checkbox" class="select-permission select-module-permission select-users-permission" data-class="select-users-permission"> Edit User</td>
                </tr>
              </tbody>
            </table>

          </form>

            <br>
            <br>
            <br>
        </div>
    </body>
</html>
```

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/jquery-checkbox-assign-multiple-permissions-to-a-role if you want to download this code.

Happy coding :)