2014-08-31 142 views
9

http://jsfiddle.net/rphpbqp9/如何編程檢查引導按鈕組(單選)按鈕

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-sm btn-primary success active"> 
     <input type="radio" name="options" id="optionFalse" checked />false 
    </label> 
    <label class="btn btn-sm btn-primary danger"> 
     <input type="radio" name="options" id="optionTrue" />true 
    </label> 
</div> 

$('#optionTrue').button('toggle'); 

我讀過更多問題的答案,但他們沒有工作。 按鈕切換不起作用,我試圖添加/刪除「活動」類,沒有效果。我使用的是1.10 jQuery和3.1 Bootstrap。這應該很簡單,我把頭髮拉出來!

回答

20

button()需要與類btn的元素被稱爲...

$('#optionTrue').closest('.btn').button('toggle'); 

這將正常切換的按鈕,並更新每個輸入適當的檢查屬性...

Fiddle

+0

你是對的,先生!我是否應該將標識放在標籤上,那麼我不必調用「最接近」的標籤? – 2014-08-31 06:43:44

+0

我希望我早些時候問過這個問題,現在我會留下更多的頭髮。 – 2014-08-31 06:44:08

+0

我剛剛嘗試過,如果我將ID級別提高一級,那麼它就可以工作,那麼我不必使用最接近的http://jsfiddle.net/6h3c5axn/1/,還有一件事:檢查呼叫不起作用然後。你可以挖掘孩子,但要去輸入字段。 – 2014-08-31 06:46:46

2

引導文檔(3.2)並沒有使這個更明顯,但這是我找到的用於設置代碼中單選按鈕初始狀態的最簡單的方法。

<div class="btn-group" data-toggle="buttons"> 
    <label id="optionFalse" class="btn btn-primary"> 
     <input type="radio" name="options" /> false 
    </label> 
    <label id="optionTrue" class="btn btn-primary "> 
     <input type="radio" name="options" /> true 
    </label> 
</div> 

if (initTrue) { 
    $('#optionTrue').button('toggle'); 
} 
else { 
    $('#optionFalse').button('toggle'); 
} 

在這個問題上閱讀幾十個帖子後,似乎這些都是混亂的一般要點:

  • 「切換」的方法並不狀態之間(關>切換上 - >關閉),只是將參考按鈕設置爲「on」並將所有其他按鈕設置爲「off」。
  • 引用的id需要在'label'上,而不是'input'。
+0

該標識是否在標籤上?這是多麼的怪異? – 2014-12-23 21:51:28