与功能引导单选按钮

我试图做到：
我试图让当用户选择这里是一个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

与功能引导单选按钮

回答

相关问题