Bootstrap 使用自定义 CSS 复选框折叠

Question

嘿，我有一个手风琴，它是一个标签和复选框。 问题是标题中的主要复选框：“我有驾驶执照”，无法选中或取消选中。 除了手风琴标题的主复选框之外，所有其他复选框都可以正常工作。

使用原生复选框时不会出现此问题，仅在使用自定义 css 复选框时才会出现。

我需要解决这个问题，我已经为此苦苦挣扎了好几个小时。 欢迎任何解决方案（希望将其变成一个简单的复选框）:)。

这里是代码的 jsfiddle：

$('.collapse').collapse();

.ui-checkbox {
  display: none;
}
.ui-checkbox + label {
  position: relative;
  padding-left: 25px;
  display: inline-block;
  font-size: 14px;
}
.ui-checkbox + label:before {
  background-color: #fff;
  /**#fff*/
  border: 1px solid #1279C6;
  padding: 9px;
  border-radius: 3px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.ui-checkbox:checked + label:before {
  border: 1px solid #1279C6;
  color: #99a1a7;
}
.ui-checkbox:checked + label:after {
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: 1px;
  left: 4px;
  color: #1279C6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="panel-group driving-license-settings" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
	    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
	      <input type="checkbox" class="ui-checkbox" id="chk1" value=""> 
          <label  for="chk1">I have Driver License</label>
		</a>
	  </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <div class="driving-license-kind">
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk2" value="">
            <label for="chk2">A</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk3" value="">
            <label for="chk3">B</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk4" value="">
            <label for="chk4">C</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk5" value="">
            <label for="chk5">D</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk6" value="">
            <label for="chk6">E</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

不要在<a>标签中使用href作为可折叠div的目标，使用data-target。

你的情况是：

<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">

见documentation。

$('.collapse').collapse();

.ui-checkbox {
  display: none;
}
.ui-checkbox + label {
  position: relative;
  padding-left: 25px;
  display: inline-block;
  font-size: 14px;
}
.ui-checkbox + label:before {
  background-color: #fff;
  /**#fff*/
  border: 1px solid #1279C6;
  padding: 9px;
  border-radius: 3px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.ui-checkbox:checked + label:before {
  border: 1px solid #1279C6;
  color: #99a1a7;
}
.ui-checkbox:checked + label:after {
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: 1px;
  left: 4px;
  color: #1279C6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="panel-group driving-license-settings" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
	    <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
		  <input type="checkbox" class="ui-checkbox" id="chk1" value=""> 
          <label for="chk1">I have Driver License</label>
		</a>
	  </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <div class="driving-license-kind">
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk2" value="">
            <label for="chk2">A</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk3" value="">
            <label for="chk3">B</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk4" value="">
            <label for="chk4">C</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk5" value="">
            <label for="chk5">D</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" class="ui-checkbox" id="chk6" value="">
            <label for="chk6">E</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>