Bootstrap switch is a button switch that gets its status when clicked by the following code:
1 < ID= "email_switch_state" type= "checkbox">
1$ (' #email_switch_state '). On ({2' Switchchange.bootstrapswitch ':function(event, state) {3 if(state = =true)4 {5$ (' #text '). html (' OK '));6 }7 Else8 {9$ (' #text '). html (' NO '));Ten } One } A});
Additional Methods
Name |
Description |
Togglestate |
Toggle the Switch state |
Toggleanimate |
Toggle the animate option |
Toggledisabled |
Toggle the disabled state |
Togglereadonly |
Toggle the ReadOnly state |
Toggleindeterminate |
Toggle the indeterminate state |
Toggleinverse |
Toggle the inverse option |
Destroy |
Destroy the instance of Bootstrap Switch |
Options
Name |
Attribute |
Type |
Description |
Values |
Default |
State |
Checked |
Boolean |
The checkbox state |
True, False |
True |
Size |
Data-size |
String |
The checkbox size |
NULL, ' mini ', ' small ', ' normal ', ' large ' |
Null |
Animate |
Data-animate |
Boolean |
Animate the Switch |
True, False |
True |
Disabled |
Disabled |
Boolean |
Disable State |
True, False |
False |
ReadOnly |
ReadOnly |
Boolean |
Readonly State |
True, False |
False |
Indeterminate |
Data-indeterminate |
Boolean |
Indeterminate state |
True, False |
False |
Inverse |
Data-inverse |
Boolean |
Inverse switch direction |
True, False |
False |
Radioalloff |
Data-radio-all-off |
Boolean |
Allow this radio button to being unchecked by the user |
True, False |
False |
OnColor |
Data-on-color |
String |
Color of the left side of the switch |
' Primary ', ' info ', ' success ', ' warning ', ' danger ', ' Default ' |
' Primary ' |
Offcolor |
Data-off-color |
String |
Color of the right side of the switch |
' Primary ', ' info ', ' success ', ' warning ', ' danger ', ' Default ' |
' Default ' |
Ontext |
Data-on-text |
String |
Text of the left side of the switch |
String |
' On ' |
Offtext |
Data-off-text |
String |
Text of the right side of the switch |
String |
' OFF ' |
LabelText |
Data-label-text |
String |
Text of the center handle of the switch |
String |
' ' |
Handlewidth |
Data-handle-width |
String | Number |
Width of the left and right sides in pixels |
' Auto ' or number |
' Auto ' |
Labelwidth |
Data-label-width |
String | Number |
Width of the center handle in pixels |
' Auto ' or number |
' Auto ' |
BaseClass |
Data-base-class |
String |
Global class Prefix |
String |
' Bootstrap-switch ' |
Wrapperclass |
Data-wrapper-class |
String | Array |
Container element Class (es) |
String | Array |
' Wrapper ' |
OnInit |
|
Function |
Callback function to execute on initialization |
Function |
function(event, state) {}
|
Onswitchchange |
|
Function |
Callback function to execute in switch state change |
Function |
function(event, state) {}
|
$.fn.bootstrapswitch.defaults.size = ' large ';
$.fn.bootstrapswitch.defaults.oncolor = ' success ';
$ (' #toggle-state-switch '). Bootstrapswitch (' state ');
Bootstrap switch function