Adding active class doesn't affect toggle button in Twitter Bootstrap

Question

I have a form with multi checkbox which is required field that I turned into twitter bootstrap toggle buttons.

I am trying to activate a selection button with js, by adding 'active' class to it. I am able to add the class but when saving the form I am getting an error that the field is required.

What am I missing?

Here is the form.

<div id="reminder">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox" name="reminder" id="id_reminder_1" value="1" title="Choose at least one reminder option">Now</label>
        <label class="btn btn-primary">
            <input type="checkbox" name="reminder" id="id_reminder_2" value="30" title="Choose at least one reminder option">30m</label>
        <label class="btn btn-primary">
            <input type="checkbox" name="reminder" id="id_reminder_3" value="60" title="Choose at least one reminder option">1h</label>
        <label class="btn btn-primary active">
            <input type="checkbox" name="reminder" id="id_reminder_4" value="120"
            title="Choose at least one reminder option">2h</label>
        <label class="btn btn-primary">
            <input type="checkbox" name="reminder" id="id_reminder_5" value="1440"
            title="Choose at least one reminder option">1d</label>
    </div>
</div>

This is how I am adding the class:

    $('#reminder label:eq(3)').addClass('active')

There is no element with id of div_id_reminder in your markup. It should be $('#reminder label:eq(3)') ? — Ram
– Ram, Commented Sep 30, 2013 at 16:36
i know this is quite late, but you may still want to have a look through the answers and select a correct one...? — benomatis
– benomatis, Commented Jun 3, 2014 at 19:51

benomatis · Accepted Answer · 2014-05-29 19:12:16Z

1

You're only adding the class, but you don't actually select it. Add the selected attribute and it will work:

$('#reminder label:eq(3)').addClass('active').attr('selected',true);

Here is a demo

answered May 29, 2014 at 19:12

benomatis

5,6537 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sangram Singh · Accepted Answer · 2013-09-30 20:09:22Z

0

Add class open not active to open the dropdown (if thats what you are trying to do). You have to add the class to <li class='dropdown open'> which hosts the <ul class='dropdown-menu'>

answered Sep 30, 2013 at 20:09

Sangram Singh

7,19115 gold badges52 silver badges79 bronze badges

3 Comments

yaniv14 Over a year ago

I am not using a dropdown menu, I am using bootstrap buttons. getbootstrap.com/javascript/#buttons

Sangram Singh Over a year ago

have u tried adding open instead of active class? make sure you add it at the right place.

yaniv14 Over a year ago

Thank you for your help, but you are replying to something not relevant to me. I dont have any issue with dropdowns.

Dana Harris · Accepted Answer · 2013-11-05 01:25:53Z

0

btn-primary is the css that will make your buttons blue. It looks like this is what you are using for inactive buttons because the way you have your code, all the buttons should be blue. If you are trying to make the button grey because grey will be your active button, then you can use removeClass('btn-primary'). This will turn it grey. Hope this helps.

answered Nov 5, 2013 at 1:25

Dana Harris

4074 silver badges6 bronze badges

Collectives™ on Stack Overflow

Adding active class doesn't affect toggle button in Twitter Bootstrap

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related