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

Question

Есть три блока контента, и я хотел бы включить / отключить их с помощью data-* "инструментов" Bootstrap. Элементы управления должны быть checkbox es. Когда отображается блок контента, его 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>

checkbox ведут себя как ожидалось. Теперь необходимо добавить актуальную функциональность. Теги 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>
...

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

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

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

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

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

Answer 1

Я бы сохранил ссылку и отбросил элементы формы.

флажок может быть извлечен из псевдо, держа флажок или нет.

вот основная идея: 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>&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>

automatix писал

Я взял ваше решение и немного его отредактировал. Принцип все тот же, но реализован с глификонами: http://jsfiddle.net/automatix/jsL3dx1w/41.