文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap Toggle:一个在剩下的

问Bootstrap Toggle:一个在剩下的
EN

Stack Overflow用户

提问于 2017-03-11 10:34:43

回答 2查看 1.7K关注 0票数 2

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

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

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

javascript

jquery

twitter-bootstrap

toggle

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-11 10:37:39

尝尝这个,

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

我想要做的是，除了当前的元素之外，我正在尝试所有其他的元素。

这是小提琴链接

票数 2

Stack Overflow用户

发布于 2017-03-11 11:50:07

你希望你的切换按钮表现得更像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演示。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42734118

复制

相似问题

问Bootstrap Toggle:一个在剩下的
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap Toggle:一个在剩下的EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap Toggle:一个在剩下的
EN