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

Question

我需要通过在引导按钮组一些复选框和ONLY隐藏相关的.dropdown-menu时#apply点击。

如您在本演示中所看到的，单击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按钮以正确关闭dropdown-menu吗？

谢谢

Answer 1

这是一些东西：

Bootply

JS ：

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

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