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

【问题标题】：I want to refresh the checkboxes when I am selecting another item from the dropdown当我从下拉列表中选择另一个项目时，我想刷新复选框
【发布时间】：2017-04-17 10:33:25
【问题描述】：

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

    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));
    }

})

【问题讨论】：

您能否提供更多 html 的代码 sn-ps 并详细说明您要做什么。
@Abdul Basit Rana ：使用浏览器的开发人员选项调试您的 jquery 代码，并试图找出您的 $("#" + a) 代码是否给出了正确元素的指针。使用 Consol 窗口开发人员选项并使用运行 $("#" + a) 代码查看每个属性及其值
@RandikaRatnayake 你还想要什么？？
@MohdIsmailSiddiqui 我已经尝试过了.. 是的，它正确地提供了一切
@AbdulBasitRana：当您更改下拉菜单时，您是否首先清除了所有复选框，然后您尝试在成功时选择新项目。也使用 prop 方法代替 attr

标签： c# jquery ajax razor model-view-controller

【解决方案1】：

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

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


        })

【讨论】：

@AbdulBasitRana：如果对您有帮助，请将此标记为答案

【解决方案2】：

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

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);
             }
    });
},

【讨论】：

这不是一个解决方案。我只是想在下次选择时刷新或重置复选框值

【解决方案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);
    }
  });
}

【讨论】：