bootstrapSwitch切换状态时不触发事件的解决方案

最近做了一个项目，表单里面有个开关按钮，如果开关 “开”则添加附加的几个表单属性，如果“关”，则隐藏附加的几个表单属性。于是选择了bootstrap中的bootstrapSwitch控件来做，因为此控件提供的方法挺多，用起来也比较方法，在加上现在bootstrap也算是比较流行的一个前端框架吧。反正最后就是选择这个控件，又不愿意或者有更好的控件的小伙伴，也欢迎推荐。

先来说说问题吧：当我写完之后，发现首次状态切换不起作用，而且只是首次切换不起作用，也不知道为什么，解决了好长时间也没解决。最后搜索了一下算是解决了。

下面来说说解决的过程吧 ，希望对各位有所帮助，不对之处，望不吝赐教。

 

首先话不多说，先来看看官网提供的一些方法。

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) {}

 

上面最后一张图是我写的一个全局方法。

这个是我切换按钮时所触发的方法。debugger跟踪了一下发现，第一次不仅该方法。所以改了一下全局方法，如下

好了，问题解决。toggleState是切换开关状态的方法，加上之后ok.具体有什么疑问的可以留言，今天就先到这里，记得关注哦。