CODEWITHSUNDEEP
jqueryhtmlcsscheckboxbootstrap-4
Krys
Krys

Reputation: 829

bootstrap 4 checkbox inside list-group-item as collapse not functioning

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>

Upvotes: 2

Views: 8686

Answers (2)

Taki
Taki

Reputation: 17654

the reason why this is not working is because the label ( and the checkbox ) are inside a link tag <a> and bootstrap is preventing the click event from getting to the children, behind the scenes there's something like : 

$('a').on('click', function(){ 
  // do the collapse stuff
  return false;
});

so the label and the checkbox never know they're clicked and therefor the checkbox never checked,

so you either get the label and the checkbox out of the <a> tag and restyle the thing or add some javascript to check the checkBox when the label is clicked :

$('.list-group-item .custom-control-label').on('click', function(){
    var checkBox = $(this).prev('input'); 

  if($(checkBox).attr('checked'))
    $(checkBox).removeAttr('checked');
  else
    $(checkBox).attr('checked', 'checked');

    return false;

})

here's a fiddle : https://jsfiddle.net/xnsm4adf/34/

$('.list-group-item .custom-control-label').on('click', function(){
  var checkBox = $(this).prev('input'); 
  
  if($(checkBox).attr('checked'))
    $(checkBox).removeAttr('checked');
  else
    $(checkBox).attr('checked', 'checked');
    
  return false;

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<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">Cras justo odio</label>
</div>
    
  </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>

Upvotes: 3

Tan Duong
Tan Duong

Reputation: 2142

You can add event click to list-group-item

$('.list-group-item').on('click', function() {
  var customInput = $(this).find('.custom-control-input');
  customInput.attr("checked", !customInput.attr("checked"));
})

See result in codepen: https://codepen.io/titan_dl_1904/pen/Brwdoq

Upvotes: 1

Related Questions