Question

我已经创建了一个bootstrap 4 list-group-item和collapse函数。

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

如果list-group-item中有复选框/单选按钮，如果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

您可以将活动点击添加到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

Answer 2

这不起作用的原因是因为标签（和复选框）位于链接标记<a>内，并且bootstrap阻止了点击事件传递给孩子，在幕后有类似的内容： / p>

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

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

2 个答案: