bootstrap switch機能

bootstrap switchはボタンスイッチで、クリックするとその状態を取得するには以下のコードを使用します.

1 <input 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             else
 8             {
 9                 $('#text').html('NO');
10             }
11         }
12 });

 

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 be 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 on switch state change
Function

function(event, state) {}

 

$.fn.bootstrapSwitch.defaults.size = 'large'; 
$.fn.bootstrapSwitch.defaults.onColor = 'success';
$('#toggle-state-switch').bootstrapSwitch('state');