Checkbox inside a link behaves wrong when Bootstrap toggling is added

There are three content blocks and I'd like to enable/disable them with the Bootstrap's data-* "tools". The control elements should be checkboxes. When a content block is displayed, its checkbox should be checked.

summary

The problem is, that the checkbox inside links are not working as expected (starting to change the state only after the second click), after adding the Bootstrap behavior to the wrapping a tags.

The code is here.

long version

So first of all I created the content blocks and the controls without functionality (and gave them some styles):

<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>

The checkboxes are behaving as expected. Now the actual functionality needs to be added. The the A tags were extended as follows:

...
<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>
...

Now the toggling is working. But the checkboxes are always checked. Well, after it I also extended the DIV wrapper around the control checkboxes:

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

Now the checkboxes are behaving ever stranger. On the first click the checkbox remains on (checked). An from the second click on the same checkbox the behavior becomes normal: the state gets changed on every click.

Is it a bug or am I doing something wrong?

How to get checkboxes inside links working correctly, when Bootstrap toggling is used?