list-group-item 内的 bootstrap 4 复选框作为折叠不起作用

Question

我已经创建了一个 bootstrap 4 list-group-item 和折叠功能。

我的问题是 list-group-item 会干扰其中的复选框，因此单击复选框本身也会激活折叠功能，但也不会响应被选中/取消选中。

如果复选框/收音机在列表组项中，如果列表组项是可折叠按钮，我如何使复选框在列表组项中独立工作？

我需要它像它一样工作，但是我可以在不触发折叠的情况下使复选框工作？

请查看代码：

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

Answer 1

这不起作用的原因是标签（和复选框）位于链接标签<a> 内，并且引导程序阻止点击事件到达孩子，在幕后有类似的东西：

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

所以标签和复选框永远不会知道它们被点击，因此复选框永远不会被选中，

因此，您要么从<a> 标记中获取标签和复选框，然后重新设置样式，要么添加一些javascript 以在单击label 时检查复选框：

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

})

这是一个小提琴：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>

Answer 2

您可以添加事件点击到list-group-item

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

在 codepen 中查看结果：https://codepen.io/titan_dl_1904/pen/Brwdoq