bootstrapSwitch使用注意点

最新推荐文章于 2025-11-22 04:41:10 发布

原创最新推荐文章于 2025-11-22 04:41:10 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap及其生态

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在使用Bootstrap Switch组件时遇到的样式不生效问题，特别是在与模态框(module)结合使用时的挑战。文章提供了详细的解决方案，包括如何通过JS代码初始化开关组件，解决样式默认状态问题，以及如何正确地在模态框显示后初始化开关，确保其正常工作。

样式不生效

在按照官网的案例中写法如下

<div class="switch">
    <input type="checkbox" checked />
</div>

但是页面毫无反应，此时需用js代码初始化一下。

function initswitch(){
$(‘.switch’).bootstrapSwitch(); 
}

与module一起使用时样式无效

与module一起使用时，需要在module初始化后再初始化switch才可以。

 $moduleModal.modal('show');
 initswitch();

与module一起使用时样式无法默认on状态

与module一起使用时样样式无法默认on状态，实际上当下按钮确实处在了on的状态，checked也无法改变。此时的现象是第一次点击事件是不生效的。这样需要再最后添加选中状态样式。

$("[.switch").bootstrapSwitch({
        onColor:"success",
        offColor:"info",
        onSwitchChange : function(event,state) {
            console.log(event+";"+state)
        }
    }).bootstrapSwitch('state', true);

这样写时需要在html中加入checked如下,否则在后续的每次打开模态框后都会有一个点击的过程。表现在css上就是会有一次滑动。

<div class="switch">
   <input type="checkbox" checked />
</div>

手动添加特定字段的校验

$('.Form').data('bootstrapValidator').validateField('uname');

手动取消特定字段的校验

$('.Form').data('bootstrapValidator').enableFieldValidators('field', enabled);