动态更改拨动开关状态

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

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

$(document).ready(function() { 

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

使用.bootstrap('on')的道具或ATTR代替，如果他们不工作。

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