20

I'm using Bootstrap's JavaScript buttons to style some radio buttons, and I don't seem to be able to set an initial button as checked.

Here is my code: 

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info">
    <input checked="checked" type="radio" id="match-three" name="options">Three numbers
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="match-four">Four numbers
  </label>
</div>

The first button has checked="checked", but it isn't being styled as checked.

The buttons are being styled OK after click events, so I'm not sure what is going wrong on initial load.

Bootply version here: http://bootply.com/89566

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Richard
  • 62,943
  • 126
  • 334
  • 542

3 Answers3

19

If you're using the HTML 5 doctype, just use checked without any value:

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

checked="checked" should work as well, so you'll have to clarify what's not working for you.

  • Having a checked attribute on the input will ensure correct state on the form field
  • Adding an active class on the label will set the correct visual state

Reference documentation.

André Dion
  • 21,269
  • 7
  • 56
  • 60
  • 4
    Why is this the accepted answer, it doesn't even address the question. This isn't about boolean attributes. This is about Bootstrap radio buttons in a button group (the `data-toggle="buttons"` bit is relevant too). The question is pretty clear, it even includes example code. [Here is a jsFiddle demonstrating the issue again](http://jsfiddle.net/EBWHy/42/). – basic6 Jul 03 '15 at 17:02
  • @basic6 Your demo has errors (all your `input`s belong to the same group). [Here's your demo updated to correct the groupings](http://jsfiddle.net/EBWHy/43/) that shows that the radio buttons are indeed checked. – André Dion Jul 06 '15 at 18:25
  • 1
    Thanks, I should've used different groups - but it actually doesn't make any difference regarding this question. Even though you've added some CSS to show which one is checked, the second radio button in the top row (`Two (checked but without class)`) is *not* "activated", which is the issue here. This isn't about the checked attribute, the whole point is that the radio button isn't styled as if it was checked by Bootstrap, unless you add the "active" class. – basic6 Jul 06 '15 at 20:36
  • 2
    As basic6 pointed out, this isn't a correct answer to the question. See http://getbootstrap.com/javascript/#buttons-checkbox-radio "For preselected options, you must add the .active class to the input's label yourself". – orrd Sep 07 '15 at 23:22
12

If you want the Bootstrap button() component to recognize the checked inputs initially you need to add some jQuery like..

$('[checked="checked"]').parent().addClass("active");

This will set the active state to the appropriate buttons/labels in the group.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • The question was about how to set the state in the initial HTML, not how to do it in Javascript. But if you do want to do it with Javascript, a better solution is to call `click()` on the radio button input field. – orrd Sep 07 '15 at 23:18
  • The ? was about a problem with a BS JavaScript component, and didn't specify a pref. of a HTML or JS solution, and why is `click()` a better solution?? Do you have an example? Click would cause unnecessary propagation of the click event. – Carol Skelly Sep 08 '15 at 01:34
  • I would say it's a better solution because it's a more general solution that works with any radio button and won't break if Bootstrap later changes how they implement their styled radio buttons (which is a bit of a hack currently). Also it does propagate the event, so that other components of the page that change based on the radio button state will get notified. But if the initial state is known at the time the HTML loads, I would stick with bbengfort's solution so there isn't any noticeable flip flopping of the radio button state as the page loads. – orrd Sep 08 '15 at 01:45
  • 1
    In my case I could not change the html. So this is an easy and well working solution for me. – Tillito Sep 10 '15 at 14:17
8

Like Skelly mentioned, the active class is what Bootstrap is toggling, it doesn't look at the checked attribute. You don't have to do it with Javascript however... 

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

Will give you what you're looking for.

bbengfort
  • 5,254
  • 4
  • 44
  • 57
  • 3
    You need both `class="... active"` and `` for Bootstrap. – chowey Jun 03 '14 at 02:20
  • Upoted. This is the right answer - the "active" class is what's missing, otherwise Bootstrap doesn't hightlight the radio button. – basic6 Jul 06 '15 at 20:41