How to make this flipswitch work based on value of mysql using php

Question

I have bought an admin panel based on bootstrap/html which comes with loads of great features one of them is flip switch which looks very sleek and wish to use that for my status of any product.

This is how the actual codes look like

<div data-off-label="Disabled"  data-on-label="Enabled"  class="switch" style="margin-top:12px;">
<input type="checkbox" checked="checked">                                       
</div>

When I inspect element from my browse I get the following:

<div data-off-label="Disabled" data-on-label="Enabled" class="switch" style="margin-top:12px;">
<div class="switch-on switch-animate" style="">
    <input type="checkbox" checked="checked">
    <span class="switch-left">Enabled</span><label>&nbsp;
    </label><span class="switch-right">Disabled</span>
</div>

I have used usual data-role="flipswitch" but this looks different as

Switch on looks like this

<div class="switch-on switch-animate"> 

Switch off looks like this

<div class="switch-off switch animate">

Please help how can I use above to change when page loads depending on value coming from database.

I have tried following and didn't work

<div data-off-label="Disabled" data-on-label="Enabled" class="switch" style="margin-top:12px;">
<div class="<?if($Status = 1){ echo 'switch-on'; } else { echo 'switch-off'; } switch-animate" style="">
    <input type="checkbox" checked="checked">
    <span class="switch-left">Enabled</span><label>&nbsp;
    </label><span class="switch-right">Disabled</span>
</div>

And switched doesn't work properly and stop sliding smoothly.

Seems like developers of the admin panel used this module for switches

http://www.bootstrap-switch.org/documentation-2.html

Answer 1

The documentation you've provided shows that the checkbox state can be set as a data attribute on the parent div.

<div data-state="<?php echo ($status == 1) ? 'true' : 'false' ?>" data-off-label="Disabled"  data-on-label="Enabled"  class="switch" style="margin-top:12px;">
    <input type="checkbox" checked="checked">                                       
</div>