Brk Brk - 3 months ago 23
CSS Question

Boostrap Collapse With a Custom CSS Checkbox

Hey I have an accordion which is a label and checkbox.
The problem is that the main checkbox in the headline: "I have a driver license", can't be checked or unchecked.
All the other checkboxes works fine expect the main checkbox which is the accordion headline.

This issue doesn't appear when using native checkbox, only when using custom css checkbox.

I need a solution to this problem, I have struggle with it for hours.
Any solution (expect turning this into a simple checkbox) is welcome :).

Here a jsfiddle to the code:



$('.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

Don't use href in the <a> tag as target for the collapsable div, use data-target.

In your case that would be:

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

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