3

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Zee
  • 351
  • 1
  • 15

1 Answers1

0

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>
shanethehat
  • 15,460
  • 11
  • 57
  • 87
  • oh sorry I typed that up wrong. I did try with == but when I use that code including php flipswitch stopped working properly. Can you give me any example of how to switch that using jquery... sorry I'm not very good in jquery – Zee Jun 08 '15 at 12:03
  • @Zee I've changed this answer in light of the documentation you provided. – shanethehat Jun 08 '15 at 13:28