javascript - 在 Bootstrap 3 下拉菜单中点击禁用 btn-group

Question

我需要在 Bootstrap 按钮组中传递一些复选框，并且仅在单击 #apply 时隐藏关联的 .dropdown-menu 。

正如您在 This Demo 中看到的那样单击 list-group-item 会隐藏 .dropdown-menu，除非您完全单击复选框

<div class="container">
<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <div class="dropdown-menu list-group">
    <button type="button" class="list-group-item"><input type="checkbox" name="type" value="item1"> Item 1 </button>
    <button type="button" class="list-group-item"><input type="checkbox" name="type" value="item2"> Item 2</button>
    <button type="button" class="list-group-item"><input type="checkbox" name="type" value="item3"> Item 3</button>
    <button type="button" class="list-group-item"><input type="checkbox" name="type" value="item4"> Item 4</button>
    <button type="button" class="list-group-item"><input class="btn btn-default btn-block" type="submit" value="Apply Changes" id="apply"></button>
  </div>
</div>
</div>

您能否告诉我如何防止这种情况发生，并启用 #apply 按钮以正确关闭下拉菜单？

谢谢

Answer 1

这里有一些东西:

<强> Bootply

JS:

$("#apply").on("click", function(){
  $("input:checked").parent().hide().slideUp();
});

$('.list-group-item').on('click', function(e){
    e.stopPropagation();
});