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點擊時更改活動單選按鈕

回答

相關問題