Bootstrap 多选：关闭每个复选框选择的下拉菜单答案

【问题标题】：Bootstrap multiselect: close dropdown for each checkbox selectionBootstrap 多选：关闭每个复选框选择的下拉菜单
【发布时间】：2014-01-21 05:03:27
【问题描述】：

我使用了 davidstutz 创建的 Bootstrap 多选。

我启用了多选，并选择了所有复选框，但是当我选择复选框时，它会被选中，但下拉菜单不会像单选一样关闭。这对我来说是一个非常具体的要求。

如何像普通选择框一样关闭每个选项选择的下拉菜单？

HTML：

<select multiple="multiple" data-placeholder="Select" 
        multiselect-dropdown="reportListDropdown" ng-model="reports.reportList"
        ng-options="replist.id as replist.name for replist in reports.reportListArr">
</select>

答案：

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

我在第 275 行以及 bootstrap-multiselect.js 的 else 部分添加了 this.$button.click(); 代码，它运行良好，但编辑核心文件不是真正的解决方案，所以有人知道吗使用属性或选项级别处理此问题的干净方法？

【问题讨论】：

你能创建一个 jsfiddle 吗？
我们能看到一些代码吗？你试过什么？
我已使用以下指令使其在 angularjs 中使用此插件 - bootstrap multiselect angular directive

标签： jquery angularjs twitter-bootstrap checkbox multi-select

【解决方案1】：

要在 jQuery 中关闭 Bootstrap MultiSelector，我发现只需单击任何其他对象 即可使用本机功能将其关闭。因此，这行得通：

$(document).click();

这是一个遍历选中的 MultiSelect 项目然后关闭 MultiSelect 的示例：

$('#foo').on("change", '[name="bar\\[\\]"]', function() {

    $('[name="bar\\[\\]"]:checked').each(function(){
        console.log( $(this).val() );
    });

    $(document).click(); // This closes the MultiSelector
});

【讨论】：

【解决方案2】：

我找到了另一种解决方案（我认为更好：D）我注意到，当打开下拉菜单时，名为“open”的类会附加到 div 容器中。因此，要关闭下拉菜单，只需删除类。你可以这样做：

$('#dropdownSelector').multiselect({
        buttonContainer: '<div id="dropdownContainer"/>',
        onChange: function(element, checked) {
            $('#dropdownContainer').removeClass('open');
        }
    });

【讨论】：

【解决方案3】：

.multiselect({
    onChange: function(option, checked) {
        this.$container.removeClass('open');
    }
});

【讨论】：