Checkbox inside a link behaves wrong when Bootstrap toggling is added - html

Question

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

Answer 1

I would keep the link and drop the form elements.
the checkbox can be drawn from a pseudo holding a checkmark or not.
here is the basic idea : https://jsfiddle.net/jsL3dx1w/7/
#filter-bar {
margin: 0;
padding: 0;
white-space: nowrap;
text-align: right;
}
#filter-bar * {
box-sizing: border-box;
}
#filter-bar a,
#filter-bar a:hover {
text-decoration: none;
}
a[data-toggle]:before {
display:inline-block;
content:'\2713';
border:solid 1px white;
box-shadow:inset 0 0 2px black, 0 0 1px black;
line-height:0.6em;
color:darkblue;
width:0.8em;height:0.8em;
}
a[data-toggle].collapsed:before {content:''}
#filter-bar {
outline: none;
border: 0;
color: #ffffff;
}
#filter-bar span{
margin: 5px 5px 0 5px;
outline: 0;
}
#filter-bar .btn:active,
#filter-bar .btn.active {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#containerFoo,
#filter-bar #filterFoo {
background: #f5a623;
}
#containerBar,
#filter-bar #filterBar {
background: #50c14e;
}
#containerBuz,
#filter-bar #filterBuz {
background: #d21f31;
}
.clear {
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
<div class="btn-group" data-toggle="buttons">
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo"class="btn btn-primary" id="filterFoo">
<span class="text-label">foo</span>
<span class="glyphicon glyphicon-question-sign"></span>
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar" class="btn btn-primary" id="filterBar">
<span class="text-label">bar</span>
<span class="glyphicon glyphicon-ok-sign"></span>
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz" class="btn btn-primary" id="filterBuz">
<span class="text-label">buz</span>
<span class="glyphicon glyphicon-remove-sign"></span>
</a>
</div>
</div>
</div>
<div> </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>
automatix wrote
I took your solution and edited it a bit. The principle is still the same, but implemented with glyphicons: http://jsfiddle.net/automatix/jsL3dx1w/41 .