动态更改切换开关状态

Question

我正在尝试弄清楚如何根据值设置切换开关按钮。我正在使用引导程序作为按钮。有人请告诉我出了什么问题？

*user.isActive 只有两个值，要么真，要么假。

<td><input id="activeSwitch" data-toggle="toggle" data-on="Active" data-off="InActive" data-onstyle="danger" data-width="90" data-height="30" style="font-size:38px" type="checkbox">
<input type="hidden" id="activeStatus" value='${user.isActive}'/></td>
<script>
$(document).ready(function() {
if($('#activeStatus').val() == 'true'){
$("#activeSwitch").attr("checked", "checked");
}
else if($('#activeStatus').val() == 'false'){
...
}
});  
</script>

Answer 1

我找到了答案，所以也想与需要帮助的人分享。对于使用引导程序的人，请使用：

$(document).ready(function() {
if ($('#activeStatus').val().trim() == 'true') {
$("#activeSwitch").bootstrapToggle('on');
} else if ($('#activeStatus').val().trim() == 'false') {
$("#activeSwitch").bootstrapToggle('off');
}
});

如果它们不起作用，请使用.bootstrap('on')而不是道具或吸引力。

Answer 2

尝试这样prop()而不是attr=>prop('checked',true). 使用布尔值而不是字符串

更新

用trim()删除不需要的空间

$(document).ready(function() {
if ($('#activeStatus').val().trim() == 'true') {
$("#activeSwitch").prop("checked", true);
} else if ($('#activeStatus').val().trim() == 'false') {
$("#activeSwitch").prop("checked", false);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input id="activeSwitch" data-toggle="toggle" data-on="Active" data-off="InActive" data-onstyle="danger" data-width="90" data-height="30" style="font-size:38px" type="checkbox">
<input type="hidden" id="activeStatus" value='true' /></td>

或单行代码

$(document).ready(function() {
$("#activeSwitch").prop("checked" , $('#activeStatus').val().trim() == 'true')
})