Bootstrap radio button with function

Question

What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:

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

What my problem is:
When I toggle this button it will not fire a function.

Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.

Here is my form:

<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>

and the function I am trying to fire:

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

Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?

Thanks

Do you have something else going on with your code? Any error messages in your browser console? I copied and pasted your code into a fiddle and it works perfectly using Jquery 2.1 and Bootstrap 3.1.1. http://jsfiddle.net/JgbLG/ — , Jun 25 '14 at 14:51
Well, I see that you are correct. When I inspect it I get some errors :Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:52311/Content/themes/base/css Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:52311/bundles/jqueryui event.returnValue is deprecated. Please use the standard event.preventDefault() instead. It doesn't seems to be effecting this, That is really strange that it does this, and there are no warnings or anthing. — Kevin, Jun 25 '14 at 15:01
Are you trying to use both Jquery UI and Bootstrap in the same project? Can you remove all references to JQuery UI and see if your code starts working? Jquery UI has conflicted with bootstrap in the past http://stackoverflow.com/questions/23428285/bootstrap-and-jqueryui-conflict — , Jun 25 '14 at 15:18
I am using both, This could be the issue, I will have to check and get back to this. Thanks — Kevin, Jun 25 '14 at 15:21
What order are your javascript files included in? Try having your bootstrap javascript file after your JqueryUI javascript file. This should prevent JqueryUI from overwriting bootstrap functionality although on the downside, your bootstrap javascript may overwrite some of your JqueryUI events and break other areas of your code. — , Jun 25 '14 at 15:23

score 0 · Accepted Answer · answered Jul 10 '14 at 15:58

I ended up using this switch here : http://proto.io/freebies/onoff/ here is the 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>

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

It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.

Bootstrap radio button with function

1 Answers1