Can't read checked value from checkbox returned from json

Question

My web application has a Dropdown List which displays users and what I want is, when the field change happens it updates a set of check-boxes to either true or false, depending on the value stored in the DB.

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

My view

<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>

My js on-change for changeid (user 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 GetAccess

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

My load page works fine, but when I change the value of user the js triggers and the JsonResult GetAccess works as expected. But all the check-boxes at the browser are always checked even when the return of the sql HaveAccess is false.
Can someone point what I'm doing wrong?
Thanks in advance for your help.
Regards

Answer 1

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

To fix above issue, please modify the code as below to set checked property for your checkboxes based on HaveAccess.selected value.

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