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);

  

 

posted on 2021-09-06 09:47  多年小白  阅读(301)  评论(0编辑  收藏  举报