# Bootstrap switch - by Mattia Larentis (@SpiritualGuru)

### 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>

    $('#dimension-switch').bootstrapSwitch('setSizeClass', '');               // Resets to the regular style
    $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');    // Sets a mini switch
    $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');   // Sets a small switch
    $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');   // Sets a large switch

### Colors javascript

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>

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

### 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');

### 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 (mini-switch)

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

### Event handler javascript

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

### 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 class="control-label" for="option1">Option 1</label>
                <div id="option1" class="make-switch radio1 radio-no-uncheck">
                    <input type="radio" name="radio1" value="option1" />
                </div>
            <label class="control-label" for="option2">Option 2</label>
                <div id="option2" class="make-switch radio1 radio-no-uncheck">
                    <input type="radio" name="radio1" value="option2" />
                </div>
            <label class="control-label" for="option3">Option 3</label>
                <div id="option3" class="make-switch radio1 radio-no-uncheck">
                    <input type="radio" name="radio1" value="option3" />
                </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.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>

### Radio javascript (allow radios uncheck)

Option 1
Option 2
Option 3

    <div class="control-group">
        <div class="controls">
            <label class="control-label" for="option1">Option 1</label>
                <div id="option1" class="make-switch radio2">
                    <input type="radio" name="radio2" value="option1" />
                </div>
            <label class="control-label" for="option2">Option 2</label>
                <div id="option2" class="make-switch radio2">
                    <input type="radio" name="radio2" value="option2" checked="checked" />
                </div>
            <label class="control-label" for="option3">Option 3</label>
                <div id="option3" class="make-switch radio2">
                    <input type="radio" name="radio2" value="option3" />
                </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.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" data-toggle="modal">Modal</a>
    -----
    <div class="modal-body">
        <div class="make-switch">
            <input type="checkbox" checked />
        </div>
    </div>

follow me - my site

### Modal