Documentation
v2.0.1
Options
All the options are accepted only using data-* attributes on the element.
checked, disabled and readonly are exceptions to the rule, being
default HTML input attributes.
Therefore, there is not any way to specify the options in JavaScript during initialization.
| Name | Type | Description | Values | Default |
|---|---|---|---|---|
| state | Boolean | The checkbox state | true, false | 'checked' attribute or true |
| size | String | The checkbox state | '', 'mini', 'small', 'normal', 'large' | '' |
| 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 |
| on | String | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
| off | String | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
| on-label | String | Text of the left side of the switch | String | 'ON' |
| off-label | String | Text of the right side of the switch | String | 'OFF' |
| label-text | String | Text of the center handle of the switch | String | ' ' |
| label-icon | String | Text of the center handle of the switch. Use to include external services icons | String | null |
Methods
| Name | Description | Accepted Values | Returned Values |
|---|---|---|---|
| state | Get checkbox state | true, false | |
| setState | Set checkbox state | (value: true, false)[, skip: true, false] | jQuery Object (input element) |
| toggleState | Toggle checkbox state | [skip: true, false] | jQuery Object (input element) |
| toggleRadioState | Toggle radio state | [skip: true, false] | jQuery Object (input element) |
| toggleRadioStateAllowUncheck | Toggle radio state allowing uncheck of the radio input | [uncheck: true, false | skip: true, false] | jQuery Object (input element) |
| setSizeClass | Set the size of the switch | '', 'mini', 'small', 'normal', 'large' | jQuery Object (input element) |
| setAnimated | Animate the switch | true, false | jQuery Object (input element) |
| isDisabled | Get disabled state | true, false | |
| setDisabled | Set disable state | true, false | jQuery Object (input element) |
| toggleDisabled | Toggle disabled state | jQuery Object (input element) | |
| isReadOnly | Get Readonly state | true, false | |
| setReadOnly | Set Readonly state | true, false | jQuery Object (input element) |
| toggleReadOnly | Toggle readonly state | jQuery Object (input element) | |
| setOnClass | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
| setOffClass | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
| setOnLabel | Text of the left side of the switch | String | jQuery Object (input element) |
| setOffLabel | Text of the right side of the switch | String | jQuery Object (input element) |
| setTextLabel | Text of the center handle of the switch | String | null |
| setTextIcon | Text of the center handle of the switch. Use to include external services icons | String | null |
| destroy | Destroy the instance of Bootstrap Switch | jQuery Object (input element) |
Events
The only event triggered is switch-change. It returns two parameters: event and
data.
The latter is an object that includes el (the input DOM element) and value (the
new input state)