#362.

index.html

@@ -54,10 +54,6 @@
                     <p class="lead">
                         Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
                     </p>
-                    
-                    <p>
-                        Please have a look at the <a href="https://github.com/davidstutz/bootstrap-multiselect/blob/master/README.md">Contribution Guidelines</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
-                    </p>
                 </div>
             </div>
 
@@ -71,6 +67,10 @@
                 The demonstration page for Bootstrap 2.3.x was removed. Nevertheless, this page should be working with Bootstrap 2.3.x as well except for some methods which are marked accordingly.
             </p>
             
+            <p class="alert alert-warning">
+                Please have a look at the <a href="https://github.com/davidstutz/bootstrap-multiselect/blob/master/README.md">Contribution Guidelines</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
+            </p>
+            
             <div class="page-header">
                 <h1><a id="getting-started"></a>Getting Started</h1>
             </div>
@@ -987,6 +987,12 @@ $(document).ready(function() {
                             </pre>
                         </td>
                     </tr>
+                    <tr>
+                        <td><code>checkboxName</code></td>
+                        <td>
+                            Per default, this option is set to <code>false</code> and the generated checkboxes (or radio buttons) are not given any name. If not set to <code>false</code>, this option defines the name of all checkboxes (or radio buttons).
+                        </td>
+                    </tr>
                     <tr>
                         <td><code>includeSelectAllOption</code></td>
                         <td>
@@ -1459,15 +1465,17 @@ $('.multiselect').multiselect('dataprovider', data);
                             </pre>
                         </td>
                         <td>
+                            <div class="btn-group">
                                 <select id="example49" multiple="multiple"></select>
                                 <select id="example50" multiple="multiple"></select>
+                            </div>
                         </td>
                     </tr>
                     <tr>
                         <td colspan="2">
                             <p><code>.multiselect('setOptions', options)</code></p>
                             <p>
-                                Used to change configuration after initializing the multiselect. This may be useful in combination with <code>.multiselect('rebuild')</code>.
+                                Used to change configuration after initializing the multiselect. This may be useful in combination with <code>.multiselect('rebuild')</code>. See the <a href="#further-examples">Further Examples</a> section for an example.
                             </p>
                         </td>
                     </tr>
@@ -2593,6 +2601,21 @@ validator.settings.ignore = ':hidden:not(".multiselect")';
             <p>
                 Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a target="_blank" href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this).
             </p>
+            
+            <p>
+                <b>Using multiple <code>select</code>'s in single selection mode with <code>option</code>'s sharing values across the different <code>select</code>'s.</b>
+            </p>
+            <p>
+                This issue is discussed in detail here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/362">#362</a>. A simple solution is to use different option values for the option <code>checkboxName</code>:
+            </p>
+            <pre class="prettyprint linenums">
+$('.multiselect').multiselect({
+    checkboxName: _.uniqueId('multiselect_')
+});
+            </pre>
+            <p>
+                where <code>_.uniqueId('multiselect_')</code> should be replaced with a random generator. Alternatively, a unique value for <code>checkboxName</code> can be used for each multiselect.
+            </p>
         </div>
 
         <div class="container">

js/bootstrap-multiselect.js

@@ -235,7 +235,7 @@
             // Maximum height of the dropdown menu.
             // If maximum height is exceeded a scrollbar will be displayed.
             maxHeight: false,
-            checkboxName: 'multiselect',
+            checkboxName: false,
             includeSelectAllOption: false,
             includeSelectAllIfMoreThan: 0,
             selectAllText: ' Select all',
@@ -546,7 +546,13 @@
 
             var $li = $(this.options.templates.li);
             $('label', $li).addClass(inputType);
+            
+            if (this.options.checkboxName) {
                 $('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />');
+            }
+            else {
+                $('label', $li).append('<input type="' + inputType + '" />');
+            }
             
             var selected = $(element).prop('selected') || false;
             var $checkbox = $('input', $li);
@@ -631,7 +637,13 @@
 
                 var $li = $(this.options.templates.li);
                 $('label', $li).addClass("checkbox");
+                
+                if (this.options.checkboxName) {
                     $('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />');
+                }
+                else {
+                    $('label', $li).append('<input type="checkbox" />');
+                }
                 
                 var $checkbox = $('input', $li);
                 $checkbox.val(this.options.selectAllValue);
@@ -901,7 +913,7 @@
             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
             
             if(justVisible) {              
-                var visibleCheckboxes = allCheckboxes.filter(":visible");
+                var visibleCheckboxes = $("li input[type='checkbox']:enabled", this.$ul).filter(":visible");
                 visibleCheckboxes.prop('checked', false);
                 
                 var values = visibleCheckboxes.map(function() {
@@ -912,15 +924,18 @@
                     return $.inArray($(this).val(), values) !== -1;
                 }).prop('selected', false);
                 
+                if (this.options.selectedClass) {
                     $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
                 }
+            }
             else {
-                var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul); 
-                allCheckboxes.prop('checked', false);
-                
+                $("li input[type='checkbox']:enabled", this.$ul).prop('checked', false);
                 $("option:enabled", this.$select).prop('selected', false);
+                
+                if (this.options.selectedClass) {
                     $("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
                 }
+            }
         },
 
         /**