DEV Community

Cover image for Jquery Checkbox Assign Multiple Permissions to a Role
Code And Deploy
Code And Deploy

Posted on

5 3

Jquery Checkbox Assign Multiple Permissions to a Role

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.

jquery-checkbox

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

First, Clone the TableCheckAll jquery Plugin.

git clone https://github.com/codeanddeploy/Jquery-Table-Check-All-Plugin.git
Enter fullscreen mode Exit fullscreen mode

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:

<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>
Enter fullscreen mode Exit fullscreen mode

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.

<!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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay