2015-09-06 53 views
1

我對HTML和Bootstrap/jQuery相當陌生。Bootstrap單選按鈕不支持數據切換

我有一個表單,我正在使用BS按鈕。它們應該充當無線電按鈕,這意味着當它們被按下時,背景顏色應該變暗(如在此example中)。但不知何故,它不起作用。下面是代碼片段: 有沒有人有線索或提示如何做到這一點? 謝謝。

<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>Survey</title> 
    <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script> 
    <script type="text/javascript" src="jquery.touchSwipe.js"></script> 
    <script type="text/javascript" src="bootstrap.min.js"></script> 
    <script type="text/javascript" src="Languages.js"></script> 
    <script type="text/javascript" src="LoadLanguages.js"></script> 
    <link rel="stylesheet" href="bootstrap.min.css"/> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/> 
</head> 

這是一組單選按鈕的一個問題:

<div class="row"> 
    <div class="col-xs-12; col-sm-6; col-md-6; col-lg-4"> 
     <legend id="s_p01_q02"></legend> 
    </div> 
</div> 
<div class="row"> 
    <div class="btn-group btn-block" data-toggle="buttons"> 
    <div class="col-xs-12; col-sm-3; col-md-3; col-lg-4"> 
     <label for="s_p01_q02_rb01" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb01" value="Option 1" type="radio"/> 
     </label> 
     <label for="s_p01_q02_rb03" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb03" value="Option 3" type="radio" class="btn-group btn-group-justified"/> 
     </label> 
     <label for="s_p01_q02_rb05" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb05" value="Option 5" type="radio" class="btn-group btn-group-justified"/> 
     </label>    
    </div> 
    <div class="col-xs-12; col-sm-3; col-md-3; col-lg-4"> 
     <label for="s_p01_q02_rb02" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb02" value="Option 2" type="radio"/> 
     </label> 
     <label for="s_p01_q02_rb04" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb04" value="Option 3" type="radio" class="btn-group btn-group-justified"/> 
     </label> 
     <input name="s_p01_q02" id="s_p01_q02_ti01" value="" type="text" maxlength="350" class="btn-block"/> 
    </div> 
    </div> 
</div> 
+0

我把代碼放在我的一個項目中,它的工作原理是:.btn-primary.active,.btn-primary:active { background-color:#265a88; border-color:#245580; } –

+0

你可以在http://jsfiddle.net/上做演示嗎? –

+0

jsfiddle。 –

回答

1

試圖將jQuery Mobile和引導相結合可以和一些部件看起來像引導別人看着像jQuery結果移動。如果你沒有在該頁面添加JQuery Mobile,你會看到你可以得到你想要的結果http://jsfiddle.net/MadalinaTn/pqyf31pv/

解決的辦法是取消所有從jQuery Mobile的的CSS您的按鈕,只是加入這一行隱藏的單選按鈕:

input[type=radio], input[type=checkbox] { 
    visibility: hidden; 
} 

我希望這有助於。

+0

作品完美:)非常感謝你 – user3185735

+0

歡迎!我很高興它工作:)! –