Boostrap折叠与自定义CSS复选框

Question

嘿，我有一个手风琴，这是一个标签和复选框。 问题是标题中的主要复选框：＆＃34;我有驾驶执照＆＃34;，无法检查或取消选中。 所有其他复选框工作正常，期望主复选框，即手风琴标题。

使用本机复选框时，仅在使用自定义CSS复选框时才会出现此问题。

我需要一个解决这个问题的方法，我已经挣扎了几个小时。 任何解决方案（期望将其转换为简单的复选框）都是受欢迎的：）。

这里是代码的一个小提琴：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

请勿使用href标记中的<a>作为可折叠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>