ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

bootstrap-switch如何控制开关

2021-09-06 10:03:09  阅读:138  来源: 互联网

标签:chkappType false bootstrapSwitch bootstrap prop 开关 switch


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

  

 

标签:chkappType,false,bootstrapSwitch,bootstrap,prop,开关,switch
来源: https://www.cnblogs.com/xi-li/p/15232438.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有