Some fixes and more tests for clickable and collapisble option groups.

dist/js/bootstrap-multiselect.js

@@ -726,7 +726,7 @@
             }, this));
             
             if (this.options.enableClickableOptGroups && this.options.multiple) {
-                $("li.multiselect-group input", this.$ul).on("change", $.proxy(function(event) {console.log('test')
+                $("li.multiselect-group input", this.$ul).on("change", $.proxy(function(event) {
                     event.stopPropagation();
                     
                     var $target = $(event.target);
@@ -763,32 +763,14 @@
                     $(this).toggleClass('hidden', true);
                 });
                 
-                $("li.multiselect-group > a > .caret-container", this.$ul).on("click", $.proxy(function(event) {
+                $("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) {
                     event.stopPropagation();
                     var $li = $(event.target).closest('li');
                     var $inputs = $li.nextUntil("li.multiselect-group");
                     
-                    var selected = true;
-                    $inputs.each(function() {
-                        selected = selected && $(this).hasClass('hidden');
-                    });
-                    
-                    $inputs.toggleClass('hidden', !selected);
+                    $inputs.toggleClass('hidden');
                 }, this));
                 
-                // Set the initial selection state of the groups.
-                $('li.multiselect-group', this.$ul).each(function() {
-                    var $group = $(this).nextUntil("li.multiselect-group", ':not(.disabled)');
-                    var $inputs = $group.find("input");
-                    
-                    var selected = true;
-                    $inputs.each(function() {
-                        selected = selected && $(this).prop("checked");
-                    });
-                    
-                    $(this).find('input').prop("checked", selected);
-                });
-                
                 $("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
                 $("li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
                 $("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
@@ -1250,11 +1232,11 @@
             
             if(justVisible) {
                 visibleCheckboxes.prop('checked', true);
-                $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
+                $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
             }
             else {
                 allCheckboxes.prop('checked', true);
-                $("li:not(.divider):not(.disabled)", this.$ul).addClass(this.options.selectedClass);
+                $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul).addClass(this.options.selectedClass);
             }
                 
             if (allCheckboxesCount === visibleCheckboxesCount || justVisible === false) {

index.html

@@ -241,7 +241,7 @@
                     <table class="table layout-fixed">
                         <tbody>
                             <tr>
-                                <td><code id="configuration-options-multiple">multiple</code></td>
+                                <td width="30%"><code id="configuration-options-multiple">multiple</code></td>
                                 <td>
                                     <p>
                                         <code>multiple</code> is not a real configuration option. It refers to the <code>multiple</code> attribute of the <code>select</code> the plugin is applied on. When the <code>multiple</code> attribute of the <code>select</code> is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the <code>multiple</code> attribute present), the first option will automatically be selected if no other option is selected in advance. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a> for how to avoid this behavior.
@@ -658,6 +658,52 @@
         });
     });
 &lt;/script&gt;
+</pre>
+                                        
+                                    <p>
+                                        Combining the above with <code>enableFiltering</code> and <code>includeSelectAllOption</code>:
+                                    </p>
+                                    
+                                    <p class="alert alert-warning">
+                                        Again, note, that the behavior of combining <code>enableCollapsibleOptGroups</code>, <code>enableCollapsibleOptGroups</code>, <code>enableFiltering</code> and <code>includeSelectAllOption</code> is not thoroughly tested. <b>Experiment with the example below to get some intuition.</b>
+                                    </p>
+                                    
+                                    <div class="example">
+                                        <script type="text/javascript">
+                                            $(document).ready(function() {
+                                                $('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
+                                                    enableClickableOptGroups: true,
+                                                    enableCollapsibleOptGroups: true,
+                                                    enableFiltering: true,
+                                                    includeSelectAllOption: true
+                                                });
+                                            });
+                                        </script>
+                                        <select id="example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption" multiple="multiple">
+                                            <optgroup label="Group 1">
+                                                <option value="1-1" disabled>Option 1.1</option>
+                                                <option value="1-2" selected="selected">Option 1.2</option>
+                                                <option value="1-3" selected="selected">Option 1.3</option>
+                                            </optgroup>
+                                            <optgroup label="Group 2">
+                                                <option value="2-1">Option 2.1</option>
+                                                <option value="2-2">Option 2.2</option>
+                                                <option value="2-3">Option 2.3</option>
+                                            </optgroup>
+                                        </select>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
+            enableClickableOptGroups: true,
+            enableCollapsibleOptGroups: true,
+            enableFiltering: true,
+            includeSelectAllOption: true
+        });
+    });
+&lt;/script&gt;
 </pre>
                                 </td>
                             </tr>