Bootstrap 切换：一开一关

Question

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

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

<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

通过元素的 class 而不是元素的 ID:

将 JQuery select 或更改为 select

切换

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

或

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

Answer 2

试试这个，

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

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

这里是jsfiddlelink

Answer 3

您希望切换按钮的行为更像 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*/

Bootstrap 切换：一开一关

Bootstrap Toggle: One on the rest off

javascript

jquery

toggle

twitter-bootstrap

JSFiddle demo here.