更改复选框时需要更新 UI

Question

我有一个基于 Bootstrap 3 的页面，上面有一个复选框：

<input type="checkbox" value="Y" id=userActive checked>

在显示表单之前，我想根据数据库中的字段值设置正确的状态，如下所示：

if (ra.active=='Y') {                
        $("#userActive").prop("checked",true);                
} else {                
        $("#userActive").prop("checked",false);                
}

问题是表单的 UI 显示始终处于选中状态（好像为真）。实际上它总是初始状态的值。如果我从 HTML 中删除 CHECKED 参数，那么复选框 UI 显示将代表 UNCHECK 而不管其值如何。

实际的 DOM 元素被正确选中或取消选中（我可以通过发布表单来验证）。只是 UI 没有正确显示。

Answer 1

您的代码没有任何问题，在这里它完全按照您的描述工作。也许您的复选框有其他代码干扰或一些特殊的 CSS 样式？

//Some setup to mimic your code
var ra = {
  active: 'N'
};


if (ra.active == 'Y') {
  $("#userActive").prop("checked", true);
} else {
  $("#userActive").prop("checked", false);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <input type="checkbox" value="Y" id=userActive checked>
    </div>
  </div>
</div>

更改复选框时需要更新 UI

Need to update UI when a checkbox is changed

html

javascript

checkbox

jquery

twitter-bootstrap