Question

基本上我正在为用户分配角色。我想自动显示预先分配的角色。我能够在第一次渲染时，但在下拉列表中更改值时复选框保持不变：

    type: "POST",
    dataType: "json",
    url: "/UserRoles/myaction",
    data: { "userid": DropDownSelectedVal },
    success: function (data) {
        $.each(data, function (i, val) {
            var a = (data[i]);
            $("#" + a).attr('checked', true);
        });
    },

    error: function (error) {
        alert('error; ' + eval(error));
    }

})

Answer 1

您应该控制所有复选框。你可以试试这个。

url: "/UserRoles/myaction",
data: { "userid": DropDownSelectedVal },
success: function (data) {
    $.each(data, function (i, val) {

        var a = (data[i]);
       if(!$("#" + a).is(":checked")) {

        $("#" + a).attr("checked", true);

            }else{
            $("#" + a).attr("checked", false);
             }
    });
},

Answer 2

首先尝试清除所有复选框，使用以下代码选择更改事件下拉列表。

            $('input:checkbox').removeAttr('checked');

然后运行ajax代码以选择新的用户角色。

            type: "POST",
            dataType: "json",
            url: "/UserRoles/myaction",
            data: { "userid": DropDownSelectedVal },
            success: function (data) {
                $.each(data, function (i, val) {
                    $("#" + val).prop('checked', true);
                });
            },
            error: function (error) {
                alert('error; ' + eval(error));
            }


        })

Answer 3

我建议的优雅解决方案是维护隐藏的输入以存储您选择的所有权限。

您的HTML

<input type="hidden" id="_hiddenSelectedPermissions" value="2, 1" />
<input class="permissions" type="checkbox" value="1">Default Permission 1
<input class="permissions" type="checkbox" value="2">Default Permission 2
<input class="permissions" type="checkbox" value="3">Permission 3
<input class="permissions" type="checkbox" value="4">Permission 4
<input class="permissions" type="checkbox" value="5">Permission 5

在ajax结果之后设置隐藏控件值并调用以下函数以重新分配所有选中的复选框

function refreshSelectedPermissions() {
  $('input:checkbox.permissions').prop('checked', false);
  var selected = $('#_hiddenSelectedPermissions').val().split(",") || [];
  $('input:checkbox.permissions').each(function() {
    var value = $(this).val();
    if($.inArray(value, selected) === -1){  
      $(this).prop('checked', false);
    }
    else{
      $(this).prop('checked', true);
    }
  });
}

当我从下拉列表中选择另一个项目时，我想刷新复选框

3 个答案: