Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

On/Off: switch button bootstrap

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

like image 578
Manoz Avatar asked Feb 20 '13 05:02

Manoz


People also ask

How do I toggle a button in bootstrap?

Add data-toggle="button" to toggle a button's active state. If you're pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button> .

How do you check if toggle is on or off?

android. settings:id/switch_widget\"]"). getAttribute("Checked"); If the element is disabled then you will see the Result Data as "false" and if it is enabled then you will see the "true."


1 Answers

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>
like image 111
Steely Wing Avatar answered Oct 02 '22 13:10

Steely Wing