Javascript 覆盖Twitter引导程序3'；s电台集团“；onclick"；事件

基本上，我使用twitter引导的按钮组组件（使用两个单选按钮）创建了一个开/关开关

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

所以本质上我点击，我的JS点击另一个标签，然后Bootsrap点击它回来。是否要覆盖引导行为

---

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>   

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

---

如果我理解正确的话，你想让开关切换，不管它被点击在哪里？如果是这样，这是一种懒惰，但可能会起作用：

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

---

我知道这并没有回答你关于禁用默认行为的问题，但我不确定这是否明智。这让你得到了我认为你想要的东西，而这种方式对用户来说很可能是天衣无缝的，尽管不可否认有点难看。

哇……出于某种原因，我决定弄明白这一点。我昨天做了一点，运气不好，但我想今天早上我已经掌握了。我有它在我的环境中工作，所以希望它能为你工作

$('.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单击后添加“returnfalse”，它将停止进一步的JS执行

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

---

您的假设是正确的，只要我单击我想切换的位置。我正在考虑一个超时或设置间隔（可能更安全），但如果可能的话，我会尽量避免。谢谢你的回复。从技术上讲，这是有效的。打得好！非常感谢您抽出时间！现在我想我找到了一个更干净的解决方案，但这只是在你的代码启发了我之后。我只是在我的JS点击后设置“returnfalse”，它会停止执行更多的代码。似乎有效。这又是因为看到了你写的东西。我会用答案更新我的问题。很高兴我能激励你，@DigitalMC！这绝对是一个有趣的挑战。

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