Question

我试图弄清楚如何根据值设置切换开关按钮。我正在使用bootstrap按钮。有人请告诉我有什么问题？

* user.isActive只有两个值为true或false。

<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

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

<强>更新

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

＆＃13;

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

＆＃13;

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

＆＃13;

或单行代码

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

Answer 2

我找到了答案，所以想与需要帮助的人分享。对于使用bootstrap的人：

$(document).ready(function() {

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

如果它们不起作用，请使用.bootstrap('on')代替prop或attr。

动态更改切换开关状态

2 个答案: