Bootstrap 3 and Bootstrap switch Example

by der_robert

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.1/css/bootstrap3/bootstrap-switch.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.1/js/bootstrap-switch.js"></script>
<input id="TheCheckBox" type="checkbox" data-off-text="False" data-on-text="True" checked="false" class="BSswitch">
<label>This Switch is Set to
    <label id="CheckBoxValue" value="None"></label>
</label>
<br />
<br />
<br />
<input id="TheCheckBox2" name="GroupedSwitches" class="BSswitch" type="radio" data-off-text="False" data-on-text="True" checked="false">
<input id="TheCheckBox3" name="GroupedSwitches" class="BSswitch" type="radio" data-off-text="False" data-on-text="True" checked="false">
<input id="TheCheckBox4" name="GroupedSwitches" class="BSswitch" type="radio" data-off-text="False" data-on-text="True" checked="false">
<br/>
<br/>
<br/>
<button type="button" id="toggleSwitches">Disable All Switches</button>
<br/>
<br/>
<br/>
<div class="make-switch">
    <input type="checkbox" checked="true" class="probeProbe" />
</div>

JavaScript

$('.BSswitch').bootstrapSwitch('state', true);


$('#CheckBoxValue').text($("#TheCheckBox").bootstrapSwitch('state'));

$('#TheCheckBox').on('switchChange.bootstrapSwitch', function () {

    $("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
});

$('.probeProbe').bootstrapSwitch('state', true);

$('.probeProbe').on('switchChange.bootstrapSwitch', function (event, state) {

    alert(this);
    alert(event);
    alert(state);
});

$('#toggleSwitches ').click(function () {
    $('.BSswitch ').bootstrapSwitch('toggleDisabled');
    if ($('.BSswitch ').attr('disabled')) {
        $(this).text('Enable All Switches ');
    } else {
        $(this).text('Disable All Switches ');
    }
});