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

幸经艺
2023-12-01

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 )
            }
          })
 类似资料: