Bootstrap checkbox/radio buttons do not change <input> value

Question

The JavaScript page for Bootstrap shows some nice use of buttons to style checkboxes and radio fields. For example, for a checkbox, I might write

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
</div>

However, the library doesn't actually change the value of the underlying <input> field -- it just changes whether the <label> field has class active. I would have expected it to change the checked attribute on the checkbox. Apparently I don't just have it misconfigured -- this is the way the examples on the Bootstrap site work.

Is this actually expected behavior? If so, it seems fairly useless, as people are going to want to use the checkbox field. If not, how do I properly configure Bootstrap checkboxes/radio buttons?

At the moment they do not change it for real... github.com/twbs/bootstrap/issues/14137 — Kolyunya
– Kolyunya, Commented Jul 14, 2014 at 14:42
Adding an attribute "name" allows the checkbox data to be POSTed, if that's what you're hoping for. — RatherBKnitting
– RatherBKnitting, Commented Apr 26, 2017 at 15:15

tomaroo · Accepted Answer · 2018-04-01 20:24:26Z

39

The checked attribute on the input isn't modified because that isn't what changes when a checkbox input is checked -- the checked DOM property is what changes (true or false), and Bootstrap handles this properly (you can inspect the element in Firebug and see the DOM property change when you toggle them). The checked attribute is only used to determine default value when the DOM is initially rendered.

If you ever happen to be doing any js/jQuery with checkboxes/radios, remember this! If you need to programatically check a checkbox or radio button, $('input').attr('checked', 'checked'); will not get the job done. $('input').prop('checked', true); is what you need.

This isn't special behavior for Bootstrap buttons, this is how all checkbox/radios work.

Edit: Firebug screenshot

Edit 2: Added text from the comments, as it seems to be helpful.

edited Apr 1, 2018 at 20:24

answered Aug 22, 2013 at 23:53

tomaroo

2,5341 gold badge20 silver badges22 bronze badges

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

5 Comments

jameshfisher Over a year ago

Interesting! I hadn't realized that distinction before.

tomaroo Over a year ago

@jameshfisher If you ever happen to be doing any js/jQuery with checkboxes/radios, remember this! If you need to programatically check a checkbox or radio button, $('input').attr('checked', 'checked'); will not get the job done. $('input').prop('checked', true); is what you need.

suo Over a year ago

@tomaroo your comment above rescued me from 3 days of hair pulling. was using $('input').attr('checked', 'checked'); instead of $('input').prop('checked', true);. life saver!

Billy Mitchell Over a year ago

How to get the checked state in regular javascript?

tomaroo Over a year ago

@BillyMitchell document.getElementById("checkbox").checked stackoverflow.com/questions/8206565/…

Jason Sperske · Accepted Answer · 2013-08-22 23:51:22Z

3

It looks like you are missing a call to "activate" the btn-group (documentation). Here is a demo of this working:

<form id='testForm'>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox" name='Option' value='1' />Option 1</label>
    </div>
</form>
<button class='btn' id='actionSubmit'>Submit</button>

<script>
    $('#actionSubmit').on('click', function (e) {
        e.preventDefault();
        alert($('#testForm').serialize());
    });

    $('.btn-group').button();
</script>

answered Aug 22, 2013 at 23:51

Jason Sperske

30.5k8 gold badges77 silver badges127 bronze badges

1 Comment

colllin Over a year ago

Actually that's not necessary. The data attributes trigger the library on their own. Remove the last line of JS in your demo ($('.btn-group').button()) and it still works.

Sanchitos · Accepted Answer · 2013-09-14 00:21:49Z

I am doing it like this for MVC.NET in case anyone needs it:

@{       
    var removeSelected = Model.Remove == true ? "active" : "";
    var buttonText = Model.Remove == true ? "Add" : "Remove";

}

    @Html.HiddenFor(model => model.Remove)
    <div class="editor-field">
        <div class="btn-group" data-toggle="buttons-checkbox">
              <button type="button" id="RemoveButton" class="btn btn-primary @removeSelected" onclick="toggle();">@buttonText</button>  
        </div
    </div>


 function toggle() {
            var value = $("#Remove").val();
            if (value == "False") {
                $("#Remove").val("True");
                $("#RemoveButton").text("Add");
            }
            else {
                $("#Remove").val("False");
                $("#RemoveButton").text("Remove");
            }            
        }

And finally don't forget to add the bootstrap js refence.

Collectives™ on Stack Overflow

Bootstrap checkbox/radio buttons do not change <input> value

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related