Dynamic togglable Bootstrap's radio button group

Question

I'm using Bootstrap 3.1.x and I want to have an toggleable Status radio button group which change its radio label's colors based on active item selected.

I have two radio buttons: Published and Draft.

I need to swap .btn-success class when Published is selected and .btn-default when it isn't.

I also need to swap .btn-danger class when Draft is selected and .btn-default when it isn't.

Markup (defaults to draft state):

<div class="btn-group" data-toggle="buttons" data-toggle-default-class="btn-default">
 <label class="btn btn-xs btn-default" data-toggle-class="btn-success">
  <input type="radio" name="status" value="1" id="status-published" />
  Published
 </label>
 <label class="btn btn-xs btn-danger active" data-toggle-class="btn-danger">
  <input type="radio" name="status" value="0" id="status-draft" checked />
  Draft
 </label>
</div>

I'm using data-toggle-default-class attribute on .btn-group to tell default button class color. Moreover, I'm using data-toggle-class attribute on labels to tell which button class color it should use when selected.

JavaScript:

$('.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);
                    }
                });
        });
});

It works, but only when you swap choices. If you click twice on one choice, it'll completely misbehave.

Here's the fiddle to see the issue: http://jsfiddle.net/Hq78X/1/

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!

Answer 1

In the hope it helps someone, I got it working changing JS a bit:

$('.btn-group[data-toggle=buttons]').each(function (i, e) {
    var default_class = $(e).data('toggle-default-class') || 'btn-default';

    $(e).find('label')
        .click(function (event) {
            $(e).find('label')
                .each(function (i, e) {
                    if (!(e == event.target)) {
                        $(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);
                    }
                });
        });
});

Updated fiddle: http://jsfiddle.net/Hq78X/2/

Thank y'all anyway. :)