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

Question

我在Bootstrap switcher plugin (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'
);