bootstrap-switch开关插件
官网地址 http://www.bootcss.com/p/bootstrap-switch/
先引入资源:
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
然后添加html:
<div id="wlan_enable_div" class="switch bootstrap-switch-small"> <input type="checkbox" id="chkappType" /> </div>
最后初始化:
$("#chkappType").bootstrapSwitch({ onText : "开", offText : "关", onColor : "primary", offColor : "warning", onSwitchChange : function() { var checkedOfAll=$("#chkappType").prop("checked"); if (checkedOfAll==false){ //关 $(‘.schedule‘).find(‘textarea‘).prop(‘disabled‘,true); }else { //开 $(‘.schedule‘).find(‘textarea‘).prop(‘disabled‘,false); } } });
需要手动设置input的选中状态时,可以这样写:
$("#chkappType").bootstrapSwitch(‘state‘, true);