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>