data-toggle="button" initial active state

[aaronchi]

Using data-toggle="buttons" doesn't set the initial active state of the radio/checkbox buttons if they are already checked.

In the following example, the first button should get a class of active when the widget is initialized, but it does not.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1" checked="checked"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

[johnnyshields]

👍 +1 having the same issue

[johnnyshields]

Here's a quick coffeescript hack for those who need it:

class window.BsHack
  @fix_btn_toggle: ->
    $('[data-toggle="buttons"]').each (i, grp) ->
      $(grp).children('label.btn').each (i, btn) ->
        btn = $(btn)
        btn.addClass('active') if btn.children('input').first().attr('checked')=='checked'

[johnnyshields]

At a minimum, please provide us a JS function which will set the correct button state across the page, which we can call at page load time.

[fat]

you should be setting this in your template… same place you are setting checked=checked

but for some reason if you can't access your template… just include this:

$(function () {
  // you may want to add an additional check to make sure that the parent is the element you expect it to be
  $('[checked="checked"]').parent().addClass('active')
})

[aaronchi]

Why not add this to the library though?

[cvrebert]

One possible reason is that I don't think there's a non-super-hacky way (at least without overhauling the plugin) to make that also work for elements added to the DOM after the initial page load, which would be a confusing/annoying inconsistency.

[cvrebert]

Duplicate of #8919.