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

Question

我在 Bootstrap 切换器插件 (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'
);