Javascript - 根据数组值检查/取消选中复选框

时间:2018-04-05 20:53:59

标签: javascript arrays laravel laravel-5 checkbox

我正在为我的项目开发一个laravel用户管理系统,允许管理员编辑在网站上注册的选定用户。编辑按钮打开一个带有用户信息的模态表单,其中包含特定网站权限的复选框。

我通过数据参数传递权限信息,然后如果角色名称包含在角色数组中,则权限复选框将设置为“已选中”。所有内容都按预期使用单一权限工作,但只要我查看具有多个权限的用户,就会为每个用户检查复选框,直到刷新页面为止。

我的代码如下:

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

我不确定是否有办法“清除”每个按钮上的数据点击以打开模态,或者是否有另一种方法可以解决它。但经过近一个小时的搜索,我空手而归。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:1)

如果用户没有权限,您必须取消选中复选框。 最简单的方法是在单击按钮后取消选中所有复选框。取消选中所有复选框后,您可以使用算法检查用户具有权限的所有复选框。

您的代码应如下所示。

$(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'));