如何在引导切换器自定义复选框中更改背景颜色

Question

我在引导切换器插件（https://github.com/nostalgiaz/bootstrap-switch）中自定义了一个复选框。如何在切换时将绿色变为红色？试过这个：

$( ".bootstrap-switch" ).click(function() {
    $( this ).toggleClass( "highlight" ); console.log('1111');
});

我的例子：http://codepen.io/rinatoptimus/pen/JEOjjp

Answer 1

您可以使用

选项onColor和/或offColor。首先，您必须以这种方式定义css类：

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-highlight {
  background-color: red !important;
}

然后，您可以在初始化中添加选项onColor或offColor：

$("[name='my-checkbox']").bootstrapSwitch('onColor','highlight');

我尝试了您的示例代码，但它并不完全有效。我不知道，您在bootstrap-switch的标准代码中更改了什么.

更新

要同时设置 onColor 和 offColor ，您可以这样定义它：

$("[name='my-checkbox']").bootstrapSwitch(
'onColor':'highlight',
'offColor':'warning'
);