Флажок внутри ссылки работает неправильно, когда добавлено переключение Bootstrap

Есть три блока содержимого, и я хотел бы включить / отключить их с помощью «инструментов» Bootstrap data-*. Элементы управления должны быть checkboxes. Когда отображается блок содержимого, его checkbox должен быть checked.

резюме

Проблема в том, что внутренние ссылки checkbox не работают должным образом (начинают изменять состояние только после второго щелчка) после добавления поведения Bootstrap к оборачивающим тегам a.

Код - здесь.

длинная версия

Итак, в первую очередь я создал блоки содержимого и элементы управления без функциональности (и дал им несколько стилей):

<div class = "col-xs-12" id = "select-panel">
    <div class = "col-lg-12" id = "filter-bar">
        <div>
            <a href = "#containerFoo">
                <label class = "btn btn-primary" id = "filterFoo">
                    <input type = "checkbox" checked autocomplete = "off">
                    <span class = "text-label">foo</span>
                    <span class = "glyphicon glyphicon-question-sign"></span>
                </label>
            </a>
            <a href = "#containerBar">
                <label class = "btn btn-primary" id = "filterBar">
                    <input type = "checkbox" checked autocomplete = "off">
                    <span class = "text-label">bar</span>
                    <span class = "glyphicon glyphicon-ok-sign"></span>
                </label>
            </a>
            <a href = "#containerBuz">
                <label class = "btn btn-primary" id = "filterBuz">
                    <input type = "checkbox" checked autocomplete = "off">
                    <span class = "text-label">buz</span>
                    <span class = "glyphicon glyphicon-remove-sign"></span>
                </label>
            </a>
        </div>
    </div>
</div>

<div>&nbsp;</div>

<div class = "panel panel-default in" id = "containerFoo">foo</div>
<div class = "panel panel-default in" id = "containerBar">bar</div>
<div class = "panel panel-default in" id = "containerBuz">buz</div>

checkboxes работают должным образом. Теперь нужно добавить актуальную функциональность. Теги A были расширены следующим образом:

...
<a href = "#containerFoo" data-toggle = "collapse" aria-expanded = "true" aria-controls = "containerFoo">
    ...
</a>
<a href = "#containerBar" data-toggle = "collapse" aria-expanded = "true" aria-controls = "containerBar">
    ...
</a>
<a href = "#containerBuz" data-toggle = "collapse" aria-expanded = "true" aria-controls = "containerBuz">
    ...
</a>
...

Теперь переключение работает. Но checkboxes всегда checked. Что ж, после этого я также расширил оболочку DIV вокруг контрольного checkboxes:

<div class = "btn-group" data-toggle = "buttons">

Теперь checkboxes ведут себя еще более странно. При первом нажатии checkbox остается включенным (checked). После второго щелчка на том же checkbox поведение становится нормальным: состояние меняется при каждом щелчке.

Это ошибка или я что-то не так делаю?

Как заставить checkboxes внутри ссылок корректно работать, когда используется переключение Bootstrap?