Bootstrap点击时更改活动单选按钮

我在Bootstrap3中使用3个单选按钮。Bootstrap点击时更改活动单选按钮

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-default"> 
    <input type="radio" name="options" id="option1" class="namesort" autocomplete="off" checked/>Name 
    </label> 
    <label class="btn btn-default"> 
    <input type="radio" name="options" id="option2" class="agesort" autocomplete="off" /> Age 
    </label> 
    <label class="btn btn-default"> 
    <input type="radio" name="options" id="option3" class="salarysort" autocomplete="off" />Salary 
    </label> 
</div>

的按钮需要选择时要使用的BTN-默认CSS当未选择的和BTN-主要活性的CSS。

所以，如果我点击了按钮时代，它应该是这样的：

<label class="btn btn-primary"> 
    <input type="radio" name="options" id="option2" class="agesort" autocomplete="off" /> Age

我试图使用jQuery .removeClass（）和.addClass（），但不能让它的工作。

有谁知道如何做到这一点？

来源

2014-11-14 user3722592

您可以发布您尝试jQuery代码？ – Marcelo 2014-11-14 17:09:25

随着引导，被点击的不是单选按钮，而是标签。您应该将您的功能绑定到单选按钮的点击事件。

$('label').click(function() { 
    $(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default'); 
});

（这也可能是，如果你在这个解决方案中使用的功能，你应该在你的代码限制选择，而不是适用于所有标签）

增加了bootply：http://www.bootply.com/FQKkiIUGlY

来源

2014-11-14 17:29:41 Marcelo

您还需要将活动类添加到获得'btn-primary'的类。 – MattD 2014-11-14 17:34:05

@MattD你不需要添加活动类。 Bootstrap事后自行完成。 – Marcelo 2014-11-14 17:34:38

工作得很好 - 谢谢！ – user3722592 2014-11-14 18:07:51

您可以通过执行此操作来获得结果。

$('label').click(function() { 
    $('label.btn-primary').removeClass('btn-primary').addClass('btn-default'); 
    $(this).removeClass('btn-default').addClass('btn-primary'); 
});

FIDDLE

来源

2014-11-14 17:31:17 MattD

Bootstrap点击时更改活动单选按钮

回答

相关问题