覆盖 Twitter Bootstrap 3 的广播组“onclick”事件答案

【问题标题】：Overwrite Twitter Bootstrap 3's radio group "onclick" event覆盖 Twitter Bootstrap 3 的广播组“onclick”事件
【发布时间】：2015-07-17 04:39:10
【问题描述】：

我基本上使用 twitter bootstrap 的 Button Group 组件使用两个单选按钮创建了一个开/关开关。

问题是当我单击“活动”（或“已选中”）单选按钮时，我希望开关触发更改。我可以通过 Javascript 做到这一点，但由于某种原因，它会在我的 JS 完成后自动点击返回。

所以基本上我点击，我的 JS 点击另一个标签，然后 Bootsrap 点击它回来。无论如何要覆盖引导行为？

Here is a fiddle

HTML

<div class="btn-group sp_toggle_switch" data-toggle="buttons">
    <label class="btn btn-primary btn-xs">
        <input type="radio" name="display_share_btn" value="true">ON
    </label>      
    <label class="btn btn-default btn-xs">
        <input type="radio" name="display_share_btn" value="false">OFF
    </label>      
</div>

Javascript

$(document).on('click','.sp_toggle_switch label.active',function(){
  $(this).siblings('label:not(.active)').trigger('click');
});

CSS

.sp_toggle_switch label:not(.active ) {background:#ffffff;  border-color: #ccc;}
.sp_toggle_switch label:not(.active ):hover {background:#f1f1f1;}
.sp_toggle_switch label {text-indent: 99px; overflow: hidden; width: 30px;}
.sp_toggle_switch label.active {text-indent: 0px; width: 36px;}
.sp_toggle_switch.switch_sm label {width: 24px; height: 17px; font-size: 10px; line-height: 14px;}
.sp_toggle_switch.switch_sm label.active {width: 32px; }

【问题讨论】：

标签： javascript html twitter-bootstrap twitter-bootstrap-3 radio-button

【解决方案1】：

哇...出于某种原因，我决心解决这个问题。我昨天做了一点，没有运气，但我想我今天早上掌握了它。我让它在我的环境中工作，所以希望它对你有用

$('.sp_toggle_switch label').on('click',function(e){

    var parent = $(this).closest('[data-toggle="buttons"]');

    if ( $(this).hasClass('active') ) {

        $(this).find('input:radio').removeAttr('checked');

        parent.find('label').not('.active').find('input:radio').attr('checked', 'checked');
        parent.find('label').not('.active').addClass('active');  

        $(this).removeClass('active');

        e.preventDefault(); // to prevent bootstrap from triggering after class change
        return false;

    } else {

        $(this).find('input:radio').attr('checked', 'checked');
        parent.find('.active').find('input:radio').removeAttr('checked');

        return true;
    }

});

【讨论】：

从技术上讲，这很有效。打的好！非常感谢您的参与！现在我想我找到了一个更干净的解决方案，但这只是在你的代码启发了我之后。我只是在我的 JS 单击后设置了“return false”，它会阻止进一步的代码执行。似乎工作。这再次来自于看到你写的东西。我会用答案更新我的问题。
很高兴我能激励你，@DigitalMC！这绝对是一个有趣的挑战。

【解决方案2】：

所以，如果我理解正确，您希望开关无论在何处单击都可以切换？如果是这样，这有点懒惰，但可能会起作用：

$(document).on('click','.sp_toggle_switch label.active',function(e){
    var inactive = $(this).siblings('label').not('.active');
    setTimeout(function() {
        inactive.trigger('click');
    }, 100);
});

我知道它不能回答您关于禁用默认行为的问题，但无论如何我不确定是否明智。这会以一种对用户来说很可能是无缝的方式为您提供我认为您想要的东西，尽管不可否认，这有点难看。

【讨论】：

你的假设是正确的，只要我点击我想切换。我正在考虑超时或 setInterval （会更防弹），但如果可能的话尽量避免它。感谢您的回复。

【解决方案3】：

只需在 JS 点击后添加“return false”，它将阻止进一步的 JS 执行。

$(document).on('click','.sp_toggle_switch label.active',function(){
    $(this).siblings('label:not(.active)').trigger('click');
    return false;
});

Here is an updated fiddle

【讨论】：