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

Question

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

正如你在这个演示中看到的，点击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

bootp

JS :

$("#apply").on("click", function(){
  $("input:checked").parent().hide().slideUp();
});
$('.list-group-item').on('click', function(e){
    e.stopPropagation();
});