Question

有三个内容块，我想使用Bootstrap的data-*“工具”来启用/禁用它们。控制元素应为checkbox es。显示内容块时，其checkbox应该为checked。

摘要

问题是，在将Bootstrap行为添加到包装的checkbox标记之后，内部链接a不能按预期工作（仅在第二次单击后才开始更改状态）。 / p>

代码为here。

长版

首先，我创建了没有功能的内容块和控件（并给了它们一些样式）：

<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包装器：

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

现在checkbox的行为越来越陌生。第一次单击时，checkbox保持在（checked）上。从相同的checkbox的第二次点击开始，行为便恢复正常：每次点击都会改变状态。

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

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

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

我接受了您的解决方案并对其进行了一些编辑。原理仍然相同，但是使用字形符http://jsfiddle.net/automatix/jsL3dx1w/41来实现。

添加Bootstrap切换后，链接内的复选框行为不正确

1 个答案: