Bootstrap switch - by Mattia Larentis

Large

---

Html:

<div id="mySwitch" class="switch switch-large" data-on="danger" data-off="warning">
    <input type="checkbox" checked="checked">
</div>

Js:

$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});

Normal

---

Html:

<div class="switch" data-animated="false">
    <input type="checkbox">
</div>

Small

---

Html:

<div class="switch switch-small">
    <input type="checkbox" checked="checked" disabled="disabled">
</div>

Mini

---

Html:

<div class="switch switch-mini">
    <input type="checkbox" checked="checked">
</div>

Toggle State

---

Html:

<div id="toggle-state-switch" class="switch">
    <input type="checkbox" checked="checked">
</div>

Js:

$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false

Destroy

---

Destroy me!

Html:

<div id="destroy-switch" class="switch">
    <input type="checkbox" checked="checked">
</div>

Js:

$('#destroy-switch').bootstrapSwitch('destroy');

Disabled

---

Is active? Toggle activation! Disable! Activate!

Html:

<div id="disable-switch" class="switch">
    <input type="checkbox" checked="checked">
</div>

Js:

$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);
$('#disable-switch').bootstrapSwitch('setActive', true);

Label

---

Html:

<div class="switch" data-on-label="SI" data-off-label="NO">
    <input type="checkbox" checked="checked">
</div>

HTML Label

---

Html:

<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
    <input type="checkbox" checked="checked">
</div>