I have created a bootstrap 4 list-group-item together with the collapse function.
My issue, is that the list-group-item interferes with a checkbox within it, such that the checkbox itself when clicked activates the collapse function as well, but also does not respond to being selected/unselected.
If a checkbox/radio is in the list-group-item, how can I make the checkbox work independently within the list-group-item, if the list-group-item is a collapsible button?
I need it to work like it does, but it there someway I can make the checkbox work without it triggering the collapse?
please review code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="list-group mt-5">
<a href="#" class="list-group-item list-group-item-action" data-toggle="collapse" data-target="#sample1" aria-expanded="false" aria-controls="sample1">
<div class="custom-control custom-checkbox float-left">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"></label>
</div>
Cras justo odio
</a>
<div class="collapse mb-2" id="sample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire