Bootstrap 3 radio buttons with events

Bootstrap 3 prevents events on radio buttons. This demonstrates how to get them back.

HTML

<script src="https://rawgit.com/cunneen/json-editor/master/dist/jsoneditor.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<form>
<div class="btn-group">
    <!-- NOTE: I REMOVED data-toggle="buttons" attribute -->
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" checked>Option 1 (preselected)</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>
        <h3>These are required.</h3>
<div class="btn-group">
    <!-- NOTE: I REMOVED data-toggle="buttons" attribute -->
    <label class="btn btn-primary">
        <input type="radio" name="options2" id="option4" required>Option 4</label>
    <label class="btn btn-primary">
        <input type="radio" name="options2" id="option5" required>Option 5</label>
    <label class="btn btn-primary">
        <input type="radio" name="options2" id="option6" required>Option 6</label>
</div>
        <br/>
        <input type=submit value=submit />
        </form>

CSS

.btn-group > label.btn > input[type=radio] {
    opacity:0;
}

JavaScript

(function () {
    // find the button groups
    var buttonGroups = document.querySelectorAll('div.btn-group');

    // attach an event listener to each button group
    for (var groupIndex = 0; groupIndex < buttonGroups.length; groupIndex++) {
        if (buttonGroups.hasOwnProperty(groupIndex) && ((typeof buttonGroups[groupIndex]) === "object")) {
            // we need this buttonGroup in the parent scope to find the old active label
            var buttonGroup = buttonGroups[groupIndex];
            buttonGroup.addEventListener("change",

            function (evt) {
                // "this" is "buttonGroup" in the parent scope
                var oldActive = this.querySelector('.btn.active');
                if (oldActive) {
                    oldActive.classList.remove('active');
                }
                evt.target.parentElement.classList.add('active');
            }.bind(buttonGroup));
        }
    }
})();