Javascript - Check/Uncheck Checkbox Based on Array Values

Question

I am developing a laravel user management system for my project that allows admins to edit a selected user that is registered on the website. The edit button opens up a modal form with the users information, which includes checkboxes for specific website permissions.

I am passing the permission info via data parameters and the permission checkboxes are then set to "checked" if the role name is included in the array of roles. Everything works as expected with single permissions, but as soon as I view a user with multiple permissions, the checkboxes remain checked for every user until the page is refreshed.

My code is as follows:

<a href="#" class="btn btn-edit" data-toggle="modal" data-target="#editModal" data-username="{{ $user->username }}" data-permissions="{{ $user->roles->pluck('name') }}" id="editUser">Edit</a>

sdfsdfsdf

    <script type="text/javascript">
        $(document).on('click', '#editUser', function() {
            $('#edit-username').val($(this).data('username'));
                var userPerms = $(this).data('permissions');

                if (userPerms.includes('Admin'))
                {
                    document.getElementById("edit-admin_perm").checked = true;
                }

                if (userPerms.includes('Captain'))
                {
                    document.getElementById("edit-captain_perm").checked = true;
                 }

          });
     </script>

I'm not sure if there is way to "clear" the data on each button click to open the modal, or if there is another way to go about it. But after nearly an hour of searches, I have come up empty handed.

Any help would be much appreciated!

IVleafclover · Accepted Answer · 2018-04-05 21:15:21Z

1

You have to uncheck the checkboxes if a user has no permission. The easiest way to do this is to uncheck all checkboxes, after the button is clicked. When all checkboxes are unchecked, you can use your algorithm to check all checkboxes the user has permissions for.

Your code should look like the following.

$(document).on('click', '#editUser', function() {

        // uncheck all checkboxes before setting the one with permissions to "checked"
        document.getElementById("edit-admin_perm").checked = false;
        document.getElementById("edit-captain_perm").checked = false;

        $('#edit-username').val($(this).data('username'));

edited Apr 5, 2018 at 21:15

answered Apr 5, 2018 at 21:12

IVleafclover

698 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BTW8892 Over a year ago

I knew it was problem something stupid I was missing, this makes a lot of sense now. Thank you!

Collectives™ on Stack Overflow

Javascript - Check/Uncheck Checkbox Based on Array Values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related