javascript - 无法从 json 返回的复选框读取选中值

Question

我的网络应用程序有一个显示用户的下拉列表，我想要的是，当字段发生更改时，它会将一组复选框更新为 true 或 false，具体取决于数据库中存储的值。

我的 Controller

public IActionResult Admin(string message) {
 EditUser euModel = new EditUser();

List<EditUser> editUser= new List<EditUser> {
  new EditUser { UserID = 0, Username = "--Select User--"},
  new EditUser { UserID = 1, Username = "Unchecked"},
  new EditUser { UserID = 2, Username = "Checked"}
 };
 ViewBag.haveAccess = HaveAccess;

 List<EditUser> HaveAccess = new List<EditUser> {
  new EditUser { DepartmentID = 1, DepartmentName = "IT", HaveAccess=false},
  new EditUser { DepartmentID = 2, DepartmentName = "Financial", HaveAccess=false},
  new EditUser { DepartmentID = 3, DepartmentName = "Sales", HaveAccess=false}
 };
 var SelectedValues = HaveAccess.Where(a => a.HaveAccess == true).Select(u => u.DepartmentID).ToArray();
 ViewBag.haveAccess = new MultiSelectList(HaveAccess, "DepartmentID", "DepartmentName", SelectedValues);
 return View(euModel);
}

我的看法

<form asp-controller="Admin" asp-action="HaveAccess" method="post" class="form-horizontal" role="form">
 <div class="alert-danger" asp-validation-summary="ModelOnly"></div>
 <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
  <label asp-for="Username" class="control-label" value=""></label>
  <select asp-for="UserID" class="form-control" id="changeid"
    asp-items="@(new SelectList(ViewBag.editUser, "UserID", "Username"))"></select>
 </div>
 <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
  <ul asp-for="haveAccess" class="control-label" id="haveAccess">
   @foreach (var item in (new SelectList(ViewBag.haveAccess, "DepartmentID", "DepartmentName", "HaveAccess")))
   {
    <li class="checkbox-label">
     <div class="checkbox">
      @Html.CheckBox("HaveAccess", @item.Selected)
      @Html.Label("HaveAccess", @item.Text)
     </div>
    </li>
   }
  </ul>
 </div>
</form>

我的 js on-change 为changeid(用户ddl)

<script type="text/javascript">
 $(document).ready(function () {
  $("#changeid").change(function () {
   var url = '@Url.Content("~/")' + "Admin/GetAccess";
   var ddlsource = "#changeid";
   $("#haveAccess").hide();
   var items = " ";
   $.getJSON(url, { UserID: $(ddlsource).val() }, function (data) {
    $("#haveAccess").empty();
     $.each(data, function (i, HaveAccess) {
       items +=
         "<li class='checkbox-label'>" +
         "<div class='checkbox'>" +
         "<input id='HaveAccess_" + HaveAccess.value + "' name='HaveAccess_" + HaveAccess.value + "' type='checkbox' " + "checked='" + HaveAccess.selected + "'/>" +
         "<label for='HaveAccess_" + HaveAccess.value + "'>" + HaveAccess.text + "</label>" +
         "</div>" +
         "</li>";
     });
     $("#haveAccess").html(items);
     $("#haveAccess").show();
    });
   })
  })
</script>

JsonResult 获取访问

public JsonResult GetAccess(string UserID) {
 List<EditUser> HaveAccess = new List<EditUser>();
 //Getting Data from Database
 con.Open();
 string ua_query = "select gu.deptid as DepartmentID, d.department as DepartmentName , gu.have_access as Have_Access " +
                   "from it_materials_users u " +
                   "inner join it_materials_gu gu on u.id = gu.userid " +
                   "inner join it_materials_dept d on d.id = gu.deptid " +
                   "where u.id = '" + UserID + "'";
 OracleCommand ua_cmd = new OracleCommand(ua_query, con);
 OracleDataAdapter ua_da = new OracleDataAdapter(ua_cmd);
 DataTable ua_dt = new DataTable();
 ua_da.Fill(ua_dt);
 foreach (DataRow ua_dr in ua_dt.Rows) {
  HaveAccess.Add(new EditUser {
    DepartmentID = Convert.ToInt16(ua_dr["DepartmentID"]),
    DepartmentName = Convert.ToString(ua_dr["DepartmentName"]),
    HaveAccess = Convert.ToBoolean(ua_dr["Have_access"])
  });
 }
 con.Close();
 var SelectedValues = HaveAccess.Where(a => a.HaveAccess == true).Select(u => u.DepartmentID).ToArray();
 return Json(new MultiSelectList(HaveAccess, "DepartmentID", "DepartmentName", SelectedValues));
}

我的加载页面工作正常，但是当我更改用户的值时，js 会触发并且 JsonResult GetAccess 按预期工作。但即使 SQL HaveAccess 返回 false，浏览器上的所有复选框也始终会被选中。
有人能指出我做错了什么吗？
预先感谢您的帮助。
问候

Answer 1

all the check-boxes at the browser are always checked even when the return of the sql HaveAccess is false.

要解决上述问题，请修改以下代码，根据 HaveAccess.selected 值设置复选框的 checked 属性。

$.getJSON(url, { UserID: $(ddlsource).val() }, function (data) {
    console.log(data);
    $("#haveAccess").empty();
    $.each(data, function (i, HaveAccess) {

        var ischecked = HaveAccess.selected ? "checked" : "";
        //console.log(ischecked);

        items +=
            "<li class='checkbox-label'>" +
            "<div class='checkbox'>" +
            "<input id='HaveAccess_" + HaveAccess.value + "' name='HaveAccess_" + HaveAccess.value + "' type='checkbox' " + ischecked  + "/>" +
            "<label for='HaveAccess_" + HaveAccess.value + "'>" + HaveAccess.text + "</label>" +
            "</div>" +
            "</li>";
    });
    $("#haveAccess").html(items);
    $("#haveAccess").show();
});