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?

Answer 1

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.

Answer 2

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>