html - 添加 Bootstrap 切换时，链接内的复选框行为错误

Question

有三个内容 block ，我想使用 Bootstrap 的 data-*“工具”启用/禁用它们。控制元素应该是 checkboxes。显示内容 block 时，应选中其复选框。

总结

问题是，在将 Bootstrap 行为添加到包装 a 标签。

密码是here .

长版

所以首先我创建了内容 block 和没有功能的控件(并给了它们一些样式):

<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 开始，行为变得正常:每次点击都会改变状态。

这是错误还是我做错了什么？

当使用 Bootstrap 切换时，如何使链接内的 checkboxes 正常工作？

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