Question

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

问题是，当我点击“活动”（或“已选中”）单选按钮时，我希望交换机无论如何都要触发更改。我可以通过Javascript来做到这一点，但出于某种原因，它会在我的JS完成后自动点击回来。

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

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; }

Answer 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;
    }

});

Answer 2

因此，如果我理解正确，您希望切换无论点击何处都可以切换？如果是这样，这有点懒惰，但可能会有效：

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

我知道它没有回答你关于禁用默认行为的问题，但无论如何我都不确定这是不是很明智。这可以让你以一种最有可能与用户无缝的方式获得你想要的东西，尽管可以肯定的是，它有点难看。

Answer 3

只需添加＆＃34;返回false＆＃34;在JS点击之后，它将阻止JS进一步执行。

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

Here is an updated fiddle

覆盖Twitter Bootstrap 3的无线电组“onclick”事件

3 个答案: