添加活动类不会影响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')

Answer 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

Answer 2

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

Answer 3

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.