與功能引導單選按鈕

我試圖做到：
我試圖讓當用戶選擇這裏是一個div滑下，並且當用戶選擇無股利向上滑動形式（從而使什麼是在這個div無形）。我希望它有一個很好的顯示（看起來像一個組中的按鈕，可以切換，只有一個可以切換，例如單選按鈕），它應該看起來或多或少像這樣：與功能引導單選按鈕

http://getbootstrap.com/components/#btn-groups

我的問題是什麼：
當我切換這個按鈕將不火的功能。

這樣會很奇怪
我注意到，當我不設置數據切換=「按鈕，」我得到的是有小圓圈和火的功能，但是當我設置單選按鈕數據切換=「按鈕」它不會觸發該功能。

這裏是我的形式：

<form id="questionnaire"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"> 
      <input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes 
     </label> 
     <label class="btn btn-default"> 
      <input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no 
     </label> 
    </div> 
    <div class="expand"> 
     <h4>How many times?</h4> 
     <div class="input-group"> 
      <span class="input-group-addon">#</span> 
      <input type="number" class="form-control"> 
     </div> 
    </div>

，我想火的功能：

$('#questionnaire input[name=vomit]').on('change', function() { 
    var $p = $('.expand'); 
    if ($('input[name=vomit]:checked').val() == "yes") { 
     //alert("hello"); 
     $p.slideDown(); 
    } 
    else { 
     //alert("nope"); 
     $p.slideUp(); 
    } 
});

任何人都可以請幫我把單選按鈕，看起來像引導（而一旦選擇他們保持顏色）一個，但功能？

感謝

來源

2014-06-25 Kevin

你的代碼還有其他的東西嗎？瀏覽器控制檯中的任何錯誤消息？我將你的代碼複製並粘貼到小提琴中，並使用Jquery 2.1和Bootstrap 3.1.1完美工作。 http://jsfiddle.net/JgbLG/ –

嗯，我看到你是正確的。當我檢查它時，我得到一些錯誤：無法加載資源：服務器響應狀態爲404（未找到）http：// localhost：52311/Content/themes/base/css 加載資源失敗：服務器響應狀態爲404（未找到）http：// localhost：52311/bundles/jqueryui event.returnValue已棄用。請改用標準的event.preventDefault（）。它似乎並沒有影響到這一點，這真的很奇怪，它是這樣做的，並且沒有任何警告或安東尼。 – Kevin

您是否試圖在同一個項目中同時使用Jquery UI和Bootstrap？你可以刪除所有對JQuery UI的引用，看看你的代碼是否開始工作？ Jquery的用戶界面與bootstrap衝突在過去http://stackoverflow.com/questions/23428285/bootstrap-and-jqueryui-conflict –

我在這裏結束了使用此開關： http://proto.io/freebies/onoff/ 下面是HTML：

<h4>Did you Vomit?</h4> 
<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" /> 

    <label class="onoffswitch-label" for="vomit"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 

<div class="expand"> 
    <div class="input-group"> 
    <span class="input-group-addon">#</span> 
    <input type="number" class="form-control"> 
    </div> 
</div>

這裏是jQuery的

$("#vomit").change(function() { 
    var $p = $('.expand'); 
    if ($(this).is(':checked')) {//this is true if the switch is on 
     $(this).val("Yes"); 
     $p.slideDown(); 
    } 
    else { 
     $(this).val("No"); 
     $("#numVomit").val(0); 
     $p.slideUp(); 
    } 
    });

好像是一個真正的有與jquery，bootstrap和jquery-ui衝突。我將不得不最終做一些代碼清理，以確切地看到它的衝突。

來源

2014-07-10 15:58:59 Kevin

與功能引導單選按鈕

回答

相關問題