复选框未在 mvc 中使用 jquery 选中/取消选中下拉列表的更改事件

Question

@using (Html.BeginForm(null, null, FormMethod.Post, new { Id = "form" }))
{
    @Html.DropDownList("Roles",newSelectList((IEnumerable<EmployeeManagementSystem.DAO.RoleMaster>)ViewData["Roles"], "RoleId", "RoleName"), "Select Role", new { @id = "ddlRole" })
    <table id="sample_editable_1">
        <tbody>
            @{                                
                var i = 0;
                foreach (var item in Model)
                {
                    <tr>
                        <td style="display: none">@Html.HiddenFor(modelItem => item.privilegeId, new { @id = "hdnPrivilegeId" + i })
                        </td>
                        <td>@Html.CheckBox("CheckBox",false, new { @id = "chkRolePrivilege" + i ,@name="PrivilegeCheckBox"})
                        </td>
                        <td>@Html.LabelFor(modelITem => item.privilegeName, item.privilegeName, new { @id = "privilegeName" + i, Value = item.privilegeName })
                       </td>
                    </tr>
                    i++;
                }
            }
        </tbody>
    </table>
}

我需要根据角色的权限检查复选框。但是在使用 jquery 的下拉更改事件中未选中/取消选中复选框。但是可以在$(document).ready(function() 中选中复选框，但是当我们在更改事件或某些内容中执行此操作时，它的选中属性不起作用并且所有其他属性（例如禁用等）都可以正常工作。

    $("#ddlRole").change(function () {
      var roleId = 0;
            var privilegeListName = "";
            var row = $(this).parent().parent();
            roleId = $('#ddlRole :selected').val();
            $.ajax({
                url: "/api/Privilege/GetPrivilegesByRoleId?RoleId=" + roleId,
                type: 'Get',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {

                    for (var i = 0; i < 4; i++) {
                        for (var j = 0; j < 4; j++) {
                            if ($('#sample_editable_1 tr #privilegeName' + i).text() == data[j].privilegeName.trim()) {

                                $('#chkRolePrivilege' + i).attr('checked', true);
                                alert("true");
                            }
                            else {
                                alert("false");
                            }
                        }
                    }
                }
              });      
            });

Answer 1

我只是对您现有的代码进行了微小的更改，我将 Checked 属性设置为 Checked 而不是 true。有时它有效。请尝试一次：

("#ddlRole").change(function () {
          var roleId = 0;
                var privilegeListName = "";
                var row = $(this).parent().parent();
                roleId = $('#ddlRole :selected').val();
                $.ajax({
                    url: "/api/Privilege/GetPrivilegesByRoleId?RoleId=" + roleId,
                    type: 'Get',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {

                        for (var i = 0; i < 4; i++) {
                            for (var j = 0; j < 4; j++) {
                                if ($('#sample_editable_1 tr #privilegeName' + i).text() == data[j].privilegeName.trim()) {

                                    $('#chkRolePrivilege' + i).attr('checked', 'checked');
                                    alert("true");
                                }
                                else {
                                    alert("false");
                                }
                            }
                        }
                    }
                  });      
                });

Answer 2

也许这会有所帮助：razor 为 Html.CheckBox 生成两个具有相同名称属性的输入。第二个输入有 type=hidden 并存储 value = true/false。它是为发送未检查的值而完成的。

Answer 3

这是假设您的数据返回一个类似

的列表

角色 = {'privilegeName1', 'privilegeName3'}

success: function(data){
   var listRoles = data.Role;
   var cnt = listRoles.length;
   for(var i = 0; i< cnt; i++){
      var privilege = listRoles[i];    // listRole[1] = privilegeName1
      var rId = $.Trim(privilege.replace('privilegeName',''));  //1
      $('#chkRolePrivilege' + rId).attr('checked', true); //chkRolePrivilege1 checked
   }
}

基本上，您在列表中真正需要的只是您要检查的复选框的 ID。如果您将复选框的 id 设置为与您的 privilegeName 的数据库 id 相同，则不需要替换和修剪。

编辑

另一种选择是

$('#chkRolePrivilege' + rId).attr('checked', 'checked');

或使用 .prop

$('#chkRolePrivilege' + rId).prop('checked', true);
$('#chkRolePrivilege' + rId).prop('checked', 'checked');