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显示始终是Checked（就像是true）。实际上它始终是初始状态的价值。如果我从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

1 个答案: