具有功能的Bootstrap單選按鈕

Question

我要完成的工作：
我正在嘗試創建一種表單，當用戶選擇是時，div向下滑動，而當用戶選擇否時div向上滑動（從而使該div中的內容不可見）。 並且我希望它具有良好的顯示效果（看起來幾乎像一個可以切換的組中的按鈕，並且一次只能切換一個，例如單選按鈕），它應該看起來像這樣：

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

我的問題是：
當我切換此按鈕時，它將不會觸發功能。

哪里很奇怪
我注意到，當我不設置data-toggle =“ buttons”時，我會看到帶有小圓圈的單選按鈕並啟動該功能，但是當我設置data-toggle =“ buttons”時，它不會啟動該功能。

這是我的表格：

<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();
    }
});

誰能幫助我讓單選按鈕看起來像引導程序（並且一旦被選中，它們保持顏色），但是功能正常？

謝謝

Answer 1

我最終在這里使用此開關： 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確實存在沖突。 我將不得不做一些代碼清理，以查看確切的沖突位置。