Turn checkboxes and radio buttons in toggle switches.
Download Bootstrap Switch 3 Release CandidateInclude the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
[...]
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>
[...]| Name | Type | Description | Values | Default |
|---|---|---|---|---|
| state | Boolean | The checkbox state | true, false | 'checked' attribute or true |
| size | String | Null | The checkbox state | null, 'mini', 'small', 'large' | null |
| animate | Boolean | Animate the switch | true, false | true |
| disabled | Boolean | Disable state | true, false | 'disabled' attribute or false |
| readonly | Boolean | Readonly state | true, false | 'readonly' attribute or false |
| onColor | String | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'primary' |
| offColor | String | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'default' |
| onText | String | Text of the left side of the switch | String | 'ON' |
| offText | String | Text of the right side of the switch | String | 'OFF' |
| labelText | String | Text of the center handle of the switch | String | ' ' |
| on | Object | Callback functions collection | ||
| on.init | Function | Callback function to execute on initialization | Function | function() {} |
| on.switchChange | Function | Callback function to execute on switch state change | Function | function() {} |
In Bootstrap Switch, every option is also a method.
You can call a method in this way:
$('input[name="my-checkbox"]').bootstrapSwitch('state', true);| Name | Description |
|---|---|
| toggleState | Toggle the switch state |
| toggleDisabled | Toggle the disabled state |
| toggleReadonly | Toggle the readonly state |
| destroy | Destroy the instance of Bootstrap Switch |