Bootstrap Toggle：休息时关闭一个

Question

我正在使用Bootstrap Toggle插件将复选框转换为切换按钮。

当我将切换状态从关闭更改为开启时，我希望所有其他人都关闭。

<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" class="toggle" id="toggle-one">  
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" class="toggle" id="toggle-two">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" class="toggle" id="toggle-three">

$('#toggle-one').bootstrapToggle('on');
$('#toggle-two').bootstrapToggle('off');
$('#toggle-three').bootstrapToggle('off');

Answer 1

试试这个，

$(".toggle").change(function() {
 if ($(this).is(":checked")) {
  $('[id^="toggle"]').not(this).each(function() {
   $(this).bootstrapToggle('off');
  });
 }
});

我想要做的是，除了当前元素，我正在对所有其他元素进行处理。

以下是jsfiddle链接

Answer 2

您希望切换按钮的行为更像radio而不是checkbox，那么为什么不将它们全部转换为radio？

<input type="radio" data-toggle="toggle" data-onstyle="success"
    class="toggle mytoggle" id="toggle-one">

至于jQuery部分，这里有一些有用的东西（如果$('.toggle').bootstrapToggle('off')失败则替代）：

$('.toggle').click(function(){
  $(this).find('input.toggle').removeClass('off');

  $('.toggle').not(this).each(function(){
    $(this).addClass('off');
    $(this).removeClass('btn-success');
  }); /*END each*/

  $(this).removeClass('off');
  $(this).addClass('btn-success');
}) /*END click*/

JSFiddle demo here.

Answer 3

更改JQuery选择器以按元素class选择，而不是按元素ID选择：

肘节

$('.toggle').bootstrapToggle('on');

或

$('.toggle').bootstrapToggle('off');