lel lel - 3 years ago 195
Javascript Question

Change Toggle Switch status dynamically

I am trying to figure out how to set toggle switch button base on a value. I am using bootstrap for the button. Anyone please tell me what is wrong?

*user.isActive only have two value either true or 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>

lel lel
Answer Source

I found the answer so wanted to share with people who need help too. For people using bootstrap use:

$(document).ready(function() {

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

Use .bootstrap('on') instead of prop or attr if they are not working.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download