Boostrap自定义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"> 
 
\t  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
\t  <input type="checkbox" class="ui-checkbox" id="chk1" value=""> 
 
      <label for="chk1">I have Driver License</label> 
 
\t \t </a> 
 
\t </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作为目标的可折叠格，使用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"> 
 
\t  <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> 
 
\t \t <input type="checkbox" class="ui-checkbox" id="chk1" value=""> 
 
      <label for="chk1">I have Driver License</label> 
 
\t \t </a> 
 
\t </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>