title: Dynamic togglable Bootstrap's radio button group
body: <p>I'm using Bootstrap 3.1.x and I want to have an toggleable <em>Status</em> radio button group which change its radio label's colors based on active item selected.</p>
  
  <p>I have two radio buttons: <em>Published</em> and <em>Draft</em>.</p>
  
  <p>I need to swap <code>.btn-success</code> class when <em>Published</em> is selected and <code>.btn-default</code> when it isn't.</p>
  
  <p>I also need to swap <code>.btn-danger</code> class when <em>Draft</em> is selected and <code>.btn-default</code> when it isn't.</p>
  
  <p><strong>Markup</strong> (defaults to <em>draft</em> state):</p>
  
  <pre><code>&lt;div class="btn-group" data-toggle="buttons" data-toggle-default-class="btn-default"&gt;
   &lt;label class="btn btn-xs btn-default" data-toggle-class="btn-success"&gt;
    &lt;input type="radio" name="status" value="1" id="status-published" /&gt;
    Published
   &lt;/label&gt;
   &lt;label class="btn btn-xs btn-danger active" data-toggle-class="btn-danger"&gt;
    &lt;input type="radio" name="status" value="0" id="status-draft" checked /&gt;
    Draft
   &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using <code>data-toggle-default-class</code> attribute on <code>.btn-group</code> to tell default button class color. Moreover, I'm using <code>data-toggle-class</code> attribute on labels to tell which button class color it should use when selected.</p>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre><code>$('.btn-group[data-toggle=buttons]').each(function (i, e) {
      var default_class = $(e).data('toggle-default-class') || 'btn-default';
  
      $(e).find('label')
          .click(function () {
              $(e).find('label')
                  .each(function (i, e) {
                      if ($(e).hasClass('active')) {
                          $(e).removeClass($(e).data('toggle-class'))
                              .addClass(default_class);
                          $(e).find('input')
                              .removeAttr('checked');
                      } else {
                          $(e).removeClass(default_class)
                              .addClass($(e).data('toggle-class'));
                          $(e).find('input')
                              .attr('checked', 1);
                      }
                  });
          });
  });
  </code></pre>
  
  <p>It works, but only when you swap choices. If you click twice on one choice, it'll completely misbehave.</p>
  
  <p>Here's the fiddle to see the issue: <a href="http://jsfiddle.net/Hq78X/1/" rel="nofollow">http://jsfiddle.net/Hq78X/1/</a></p>
  
  <p>I'm looking for a fix to this and I'm also open to suggestions on an unobtrusive way to achieve that. Thank you in advance!</p>