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

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'
);