On/Off: switch button bootstrap

Question

Here is my code-

<div id="normal-toggle-button" class="toggle-button" style="width: 100px; height: 25px;">
            <div style="left: 0px; width: 150px;"><input type="checkbox" checked="checked"><span class="labelLeft" style="width: 50px; height: 25px; line-height: 25px;">ON</span><label for="" style="width: 50px; height: 25px;"></label><span class="labelRight" style="width: 50px; height: 25px; line-height: 25px;">OFF </span></div>
        </div>
    </div>

Script-

$(document).ready(function() {
        $('#normal-toggle-button').toggleButtons();
    });

I want a basic button given on this page- Switch buttons

I am doing all right. But something i still missed.

Check in here- Fiddle

I think this post will be helpful http://stackoverflow.com/questions/4177159/jquery-toggle-checkboxes-on-off — Sudix, Feb 20 '13 at 06:03

Steely Wing · Accepted Answer · 2018-05-02T01:17:19.613

12

The simplest use of bootstrapSwitch

Demo

<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

<input type="checkbox">
<script>
  $('input:checkbox').bootstrapSwitch();
</script>

edited May 02 '18 at 01:17

answered Feb 20 '13 at 09:01

Steely Wing

16,239
8
58
54

2

It appears this no longer works. Maybe with the latest version of bootstrap it broke? – Ryan Langton Feb 11 '14 at 21:42
@WingLeong I want to save the state of the button till it is not changed manually. Is it possible? – user983983 Apr 02 '14 at 12:53
@user983983, use localStorage in javascript- http://diveintohtml5.info/storage.html – Manoz Jul 12 '14 at 07:23

score -1 · Answer 2 · edited May 23 '17 at 12:16

-1

class matters

You had the class as "toggle-button" still, change it to "switch"

Here is your updated fiddle: http://jsfiddle.net/WvRZw/10/

 <div id="normal-toggle-button" class="toggle-button"....

change to

  <div id="normal-toggle-button" class="switch" ....

css/javascript includes

You need to include the bootstrap javascript and css as well (see the resources section) (also regarding including javascript and css: How to get bootstrap buttons to show active state?)

edited May 23 '17 at 12:16

Community

1
1

answered Feb 20 '13 at 05:52

Amir T

2,708
18
21

Ok, everything in your code was about "toggle-button". Also needed the base bootstrap js/css. – Amir T Feb 20 '13 at 06:22

On/Off: switch button bootstrap

2 Answers2

class matters

css/javascript includes