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

Question

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

此问题在使用原生复选框时不会出现，仅在使用自定义 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

不要使用 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>