Javascript - 基于数组值检查/取消选中复选框

Question

我正在为我的项目开发一个 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>

我不确定是否有办法“清除”每个按钮单击以打开模式时的数据，或者是否有其他方法可以解决。但经过近一个小时的搜索，我空手而归。

任何帮助将不胜感激！

Answer 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'));