## Size

Dimensions can be changed too:

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

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

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

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

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

    // Resets to the regular style
    $('#dimension-switch').bootstrapSwitch('setSizeClass', '');

    // Sets a mini switch
    $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');

    // Sets a small switch
    $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');

    // Sets a large switch
    $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');

## Colors

Colors can be changed too:

      <div class="make-switch" data-on="primary" data-off="info">
      <input type="checkbox" checked>
      </div>

      <div class="make-switch" data-on="info" data-off="success">
      <input type="checkbox" checked>
      </div>

      <div class="make-switch" data-on="success" data-off="warning">
      <input type="checkbox" checked>
      </div>

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

      <div class="make-switch" data-on="danger" data-off="default">
      <input type="checkbox" checked>
      </div>

      <div class="make-switch" data-on="default" data-off="primary">
      <input type="checkbox" checked>
      </div>

      <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
      <input type="checkbox" checked>
      </div>

        $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
        $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');

## Animation javascript

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

      // Enables animation for the selected item
      $('#animated-switch').bootstrapSwitch('setAnimated', true);

      // Disables animation for the selected item
      $('#animated-switch').bootstrapSwitch('setAnimated', false);

## Disabled

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

## Text

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

      $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
      $('#label-switch').bootstrapSwitch('setOffLabel', 'O');

## Label Text

      <div class="make-switch" data-text-label="TV">
      <input type="checkbox" checked>
      </div>

## HTML text

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

## HTML text Label Icon

##### Standard

##### Font Awesome

##### Flat UI

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

      <div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
      <input type="checkbox" checked>
      </div>

      <div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
      <input type="checkbox" checked>
      </div>

## Event handler jav

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

## Label Event hjavascript

##### Label 1

Click on this Text to change the switch state

##### Label 2

Click on this Text to change the switch state

      <label id="label-toggle-switch">Click on this Text to change the switch state</label>
      <div class="label-toggle-switch make-switch">
          <input type="checkbox" checked />
      </div>
      <script>
      $('#label-toggle-switch').on('click', function(e, data) {
          $('.label-toggle-switch').bootstrapSwitch('toggleState');
      });
      $('.label-toggle-switch').on('switch-change', function (e, data) {
          alert(data.value);
      });
      </script>

      <div id="label2-toggle-switch">
      <label class="label-change-switch">Click on this Text to change the switch state
      <div class="label2-toggle-switch make-switch">
          <input type="checkbox" checked />
      </div>
      </label>
      </div>
      <script>
      $('#label2-toggle-switch').on('switch-change', function(e, data) {
          alert(data.value);
      });
      </script>

## Toggle State javascript

Status!
ON!
Toggle me!
OFF!

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

## Destroy javascript

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

## Create javascript

Create

      $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();

## Disabled javascript

amazing label

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

## Radio javascript

Option 1
Option 2
Option 3

      <div class="control-group">
      <div class="controls">
          <label for="option1">Option 1</label>
          <div class="make-switch radio1 radio-no-uncheck">
              <input id="option1" type="radio" name="radio1" value="option1">
          </div>
          <label for="option2">Option 2</label>
          <div class="make-switch radio1 radio-no-uncheck">
              <input id="option2" type="radio" name="radio1" value="option2">
          </div>
          <label for="option3">Option 3</label>
          <div class="make-switch radio1 radio-no-uncheck">
              <input id="option3" type="radio" name="radio1" value="option3">
          </div>
      </div>
      </div>
      <script>
      $('.radio1').on('switch-change', function () {
          $('.radio1').bootstrapSwitch('toggleRadioState');
      });
      // or
      $('.radio1').on('switch-change', function () {
          $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
      });
      // or
      $('.radio1').on('switch-change', function () {
          $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
      });
      </script>

## javascript (allow radios uncheck)

Option 1
Option 2
Option 3

      <div class="control-group">
      <div class="controls">
          <label for="option11">Option 1</label>
          <div class="make-switch radio2">
              <input id="option11" type="radio" name="radio2" value="option1">
          </div>
          <label for="option12">Option 2</label>
          <div class="make-switch radio2">
              <input id="option12" type="radio" name="radio2" value="option2" checked="checked">
          </div>
          <label for="option13">Option 3</label>
          <div class="make-switch radio2">
              <input id="option13" type="radio" name="radio2" value="option3">
          </div>
      </div>
      </div>
      <script>
      $('.radio2').on('switch-change', function () {
          $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
      });
      </script>

## Form - try to use tab, space and reset button

Email
Notification 1
Notification 2

      <form class="form-horizontal">
      <div class="control-group">
          <label class="control-label" for="inputEmail">Email</label>
          <div class="controls">
              <input type="text" id="inputEmail" placeholder="Email">
          </div>
      </div>
      <div class="control-group">
          <label class="control-label" for="notification1">Notification 1</label>
          <div class="controls">
              <div class="make-switch" tabindex="0">
                  <input id="notification1" type="checkbox">
              </div>
          </div>
      </div>
      <div class="control-group">
          <label class="control-label" for="notification2">Notification 2</label>
          <div class="controls">
              <div class="make-switch" tabindex="0">
                  <input id="notification2" type="checkbox">
              </div>
          </div>
      </div>
      <div class="form-actions">
          <button type="reset" class="btn btn-inverse">Reset</button>
      </div>
      </form>

## Modal

Modal

    <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>

    <div class="modal-body">
        <div class="make-switch">
            <input type="checkbox" checked>
        </div>
    </div>

### Modal