Clickable Optgroup headers

[tkivari]

Adds clickable optGroup headers that allow a user to select or deselect all of the options in an optgroup. For multiselect dropdowns.

[philfreo]

see also #233 which has a similar implemenation

[svrin]

Thx for having this feature now, but I think that there should be a better way than creating phony random ids and probably running in name clashes like storing the reference or index.

[davidstutz]

For reference: #388 is similar and I will try to merge #388.

[markusd1984]

I've added another similar setting enableClickableOptGroupsSingle: false, to allow for clickable headers for single select which is much easier to click than the carret on the very right. https://github.com/davidstutz/bootstrap-multiselect/pull/388

if (this.options.enableClickableOptGroupsSingle) {
                $groupOption.addClass("multiselect-group-header");
                $groupOption.html(" " + label);
            }

if (this.options.enableClickableOptGroupsSingle /*&& this.options.multiple*/) {
                $(".multiselect-group-header", this.$popupContainer).off("click");
                $(".multiselect-group-header", this.$popupContainer).on("click", $.proxy(function (event) {
                    var $group = $(event.target).closest('.multiselect-group');
                    var $inputs = $group.nextUntil(".multiselect-group")
                        .not('.multiselect-filter-hidden');

                    var visible = true;
                    $inputs.each(function () {
                        visible = visible && !$(this).hasClass('multiselect-collapsible-hidden');
                    });

                    if (visible) {
                        $inputs.hide()
                            .addClass('multiselect-collapsible-hidden');
                    }
                    else {
                        $inputs.show()
                            .removeClass('multiselect-collapsible-hidden');
                    }
                }, this));
            }