bootstrap-switch

首先需要引入bootstrap的css和js文件，再引入bootstrap-switch.css和bootstrap-switch.js文件

<script type="text/javascript" src="bootstrap-switch.min.js"></script>     
<link rel="stylesheet" type="text/css" href="bootstrap-switch.min.css" /> 

下载地址：http://www.bootcss.com/p/bootstrap-switch/

html代码：

<div class="switch">
    <input type="checkbox" name="switch">
</div>

通过js实现开关的初始化：

$('[name="switch"]').bootstrapSwitch({  
        onText:"启动",  
        offText:"停止",  
        onColor:"success",  
        offColor:"info",  
        size:"small",  
        onSwitchChange:function(event,state){  
            if(state==true){  
                $(this).val("1");  
            }else{  
                $(this).val("2");  
            }  
        }  
    })  

覆盖全局属性：

$.fn.bootstrapSwitch.defaults.size = 'large';  
$.fn.bootstrapSwitch.defaults.onColor = 'success';

bootstrap-switch若想根据动态数据控制switch的状态，使用$(this).bootstrapSwitch('state',!state,true);

贴代码

 1 $(element[0]).children().bootstrapSwitch().on('switchChange.bootstrapSwitch',function(target,state){
 2         $(this).bootstrapSwitch('state',!state,true);//阻止switch状态变化
 3 
 4         //......此处省略动态获取数据的代码
 5 
 6         //如果TRUE则状态改变，否则状态不变
 7         if（...){
 8               $this.bootstrapSwitch('toggleState',true);  
 9         }
10 }）    

bootstrap-switch的属性：