bootstrap-switch.js在禁用开关状态时去除focus默认样式

最新推荐文章于 2024-08-09 08:22:56 发布

花花裳

最新推荐文章于 2024-08-09 08:22:56 发布

阅读量468

点赞数

分类专栏： jQuery 文章标签： javascript bootstrap 前端 jquery

本文链接：https://blog.csdn.net/sll411325/article/details/127068156

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jq项目使用了bootstrap-switch.js插件，发现在禁用时点击两次开关依然会增加一个bootstrap-switch-focused的类名，普通的focus事件无法进入，可用以下方法：
（另外，如果有多个开关，需要获取当前改变的开关，可以在onSwitchChange事件内使用event.target.id获取当前开关的id。）

		$(".checkbox-switch").bootstrapSwitch({
            onText: "开启", // 设置ON文本
            offText: "关闭", // 设置OFF文本
            onColor: "success", // 设置ON文本颜色     (info/success/warning/danger/primary)
            offColor: "default", // 设置OFF文本颜色     (info/success/warning/danger/primary)
            size: "normal", // 设置控件大小,从小到大  (mini/small/normal/large)
            handleWidth: "35", //设置控件宽度
            //初始化
            onInit: function onInit(dom,event,state) {
              //禁用时去除focus样式
              $('.checkbox-switch').on('focus.bootstrapSwitch',function(){
                $('.bootstrap-switch-disabled').removeClass("bootstrap-switch-focused")
              }) 
            },
            // 当开关状态改变时触发
            onSwitchChange: function (event, state) {
              var isornotId = event.target.id
              console.log('isornotId ',isornotId )
            }
          })