Bootstrap：設置在HTML

中選中的初始單選按鈕我正在使用Bootstrap的JavaScript按鈕來設置某些單選按鈕的樣式，而且我似乎無法將初始按鈕設置爲選中狀態。Bootstrap：設置在HTML

這裏是我的代碼：

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-info"> 
    <input checked="checked" type="radio" id="match-three" name="options">Three numbers 
    </label> 
    <label class="btn btn-info"> 
    <input type="radio" name="options" id="match-four">Four numbers 
    </label> 
</div>

第一個按鈕具有checked="checked"，但檢查它沒有被風格化。

單擊事件後，按鈕的樣式確定，所以我不確定初始加載時出了什麼問題。

Bootply版本在這裏：http://bootply.com/89566

來源

2013-10-23 Richard

如果您使用的是HTML 5 DOCTYPE，只使用checked沒有任何價值：

<label class="btn btn-info active"> 
    <input checked type="radio" id="match-three" name="options">Three numbers 
</label>

checked="checked" should work as well，所以你必須要弄清楚什麼是不工作您。

有上input一個checked屬性將確保在表單字段
在label添加一個active類正確的狀態將設置正確的視覺狀態

Reference documentation。

來源

2013-10-23 12:35:25

爲什麼這是公認的答案，它甚至沒有解決這個問題。這不是關於布爾屬性。這是關於按鈕組中的Bootstrap單選按鈕的（數據切換=「按鈕」位也是相關的）。問題很明顯，甚至包含示例代碼。 [這是一個jsFiddle再次展示這個問題]（http://jsfiddle.net/EBWHy/42/）。 – basic6

@ basic6您的演示有錯誤（您的所有輸入屬於同一組）。 [這裏是你的演示更新，以糾正分組]（http://jsfiddle.net/EBWHy/43/），顯示單選按鈕確實被檢查。 –

謝謝，我應該使用不同的組 - 但它對於這個問題實際上沒有任何區別。即使你已經添加了一些CSS來顯示哪一個被選中，第二行中的第二個單選按鈕（'Two（checked，but class）'）是* not *「activated」，這是這裏的問題。這不是關於checked屬性的問題，整個問題是單選按鈕的樣式不像Bootstrap檢查的樣子，除非添加「active」類。 – basic6

如果你想在引導button()部件最初識別checked輸入您需要添加一些jQuery的喜歡..

$('[checked="checked"]').parent().addClass("active");

這將設置激活狀態的組中的相應按鈕/標籤。

來源

2013-10-23 19:42:50 ZimSystem

問題是關於如何在初始HTML中設置狀態，而不是如何在Javascript中完成。但是如果你確實想用Javascript來做，更好的解決方案是在單選按鈕輸入字段中調用'click（）'。 – orrd

The？是關於一個BS JavaScript組件的問題，並沒有指定一個前綴。 HTML或JS解決方案，爲什麼'click（）'更好的解決方案？你有一個例子嗎？點擊會導致點擊事件的不必要的傳播。 – ZimSystem

我會說這是一個更好的解決方案，因爲它是一個更通用的解決方案，可以與任何單選按鈕一起使用，並且如果Bootstrap稍後更改他們實現其樣式單選按鈕（當前有點黑客），它們不會中斷。此外，它還會傳播事件，以便根據單選按鈕狀態更改的頁面的其他組件會得到通知。但是如果在加載HTML時知道初始狀態，我會堅持使用bbengfort的解決方案，因此在加載頁面時沒有任何明顯的單選按鈕狀態翻轉。 – orrd

就像斯凱利提到的那樣，活動類是Bootstrap切換的內容，它沒有看着checked屬性。你不必用Javascript來做，但是...

<label class="btn btn-info active"> 
    <input checked type="radio" id="match-three" name="options">Three numbers 
</label>

會給你你要找的。

來源

2014-02-17 18:13:15 bbengfort

你需要'class =「... active」'和'<輸入檢查...>'Bootstrap。 – chowey

加註。這是正確的答案 - 「主動」類是缺少的，否則Bootstrap不會高亮單選按鈕。 – basic6

Bootstrap：設置在HTML

回答

相關問題