#76, #75, updated demo.

See #76, #75. Updated demo and knockout examples. Multiselect iwll adopt
the disabled state of the select.

index.html

@@ -463,6 +463,21 @@
 						Using the <code>data-role="multiselect"</code> attribute for automatic wireup.
 					</td>
 				</tr>
+				<tr>
+					<td>
+						<select id="example31" multiple="multiple" data-role="multiselect" disabled>
+							<option value="cheese">Cheese</option>
+							<option value="tomatoes">Tomatoes</option>
+							<option value="mozarella">Mozzarella</option>
+							<option value="mushrooms">Mushrooms</option>
+							<option value="pepperoni">Pepperoni</option>
+							<option value="onions">Onions</option>
+						</select>
+					</td>
+					<td>
+						The multiselect will adopt the state of the select: <code>&lt;select disabled&gt;&lt;/select&gt;</code>.
+					</td>
+				</tr>
 			</table>
 			<div class="page-header">
 				<h1>Code</h1>

js/bootstrap-multiselect.js

@@ -28,7 +28,7 @@
 		        if (!ms) {
 		            $(element).multiselect(ko.utils.unwrapObservable(valueAccessor()));
 		        }
-		        else if (allBindingsAccessor().options().length !== ms.originalOptions.length) {
+		        else if (allBindingsAccessor().options && allBindingsAccessor().options().length !== ms.originalOptions.length) {
 		            ms.updateOriginalOptions();
 		            $(element).multiselect('rebuild');
 		        }
@@ -183,6 +183,15 @@
 			}
 		},
 		
+		toggleActiveState: function (shouldBeActive) {
+			if (this.$select.attr('disabled') == undefined) {
+				$('button.multiselect.dropdown-toggle', this.$container).removeClass('disabled');
+			}
+			else {
+				$('button.multiselect.dropdown-toggle', this.$container).addClass('disabled');
+			}
+		}, 
+		
 		// Build the dropdown and bind event handling.
 		buildDropdown: function () {
 			var alreadyHasSelectAll = this.$select[0][0] ? this.$select[0][0].value == this.options.selectAllValue : false;
@@ -192,6 +201,8 @@
 				this.$select.prepend('<option value="' + this.options.selectAllValue + '">' + this.options.selectAllText + '</option>');
 		    }
 		
+			this.toggleActiveState();
+		
 			this.$select.children().each($.proxy(function (index, element) {
 				// Support optgroups and options without a group simultaneously.
 				var tag = $(element).prop('tagName').toLowerCase();

knockout-examples.html

@@ -45,15 +45,29 @@
                 <td>Info</td>
                 <td></td>
             </tr>
-            <tr>
+            <tr id="vm1">
                 <td>
                     <select multiple="multiple" data-bind="options: items, selectedOptions: selectedItems, multiselect: multiSelectInitOptions"></select>
                 </td>
                 <td><span data-bind="text: ko.toJSON(selectedItems())" /></td>
                 <td>Basic knockout multiselect example with select all options enabled. Notice that once an item is added to the collection, the select all option isn't checked anymore because it isn't true anymore.
                 </td>
-                <td><button data-bind="click: addItem" class="btn btn-primary">Add item</button>
+                <th><button data-bind="click: addItem" class="btn btn-primary">Add item</button></th>
+            </tr>
+            <tr id="vm2">
+                <td>
+                    <select multiple="multiple" data-bind="selectedOptions: selectedItems, multiselect: multiSelectInitOptions">
+                        <option value="cheese">Cheese</option>
+						<option value="tomatoes">Tomatoes</option>
+						<option value="mozarella">Mozzarella</option>
+						<option value="mushrooms">Mushrooms</option>
+						<option value="pepperoni">Pepperoni</option>
+						<option value="onions">Onions</option>
+                    </select>
                 </td>
+                <td><span data-bind="text: ko.toJSON(selectedItems())" /></td>
+                <td>Basic knockout multiselect example with html-based options list. Notice that once an item is added to the collection, the select all option isn't checked anymore because it isn't true anymore.</td>
+           		<td></td>
             </tr>
         </table>
         <hr>
@@ -65,15 +79,10 @@
 </body>
 </html>
 <script>
-    var viewModel = function () {
+    var viewModel1 = function () {
         var self = this;
-        self.items = ko.observableArray([
-             'Cheese',
-            'Tomatoes',
-            'Mozzarella',
-            'Mushrooms',
-            'Pepperoni' 
-        ]);
+        
+        self.items = ko.observableArray([]);
 
         self.multiSelectInitOptions = {
             includeSelectAllOption: true,
@@ -89,6 +98,23 @@
         return self;
     };
     
-    var vm = new viewModel();
-    ko.applyBindings(vm);
+    var viewModel2 = function () {
+        var self = this;
+        
+        self.items = ko.observableArray([]);
+
+        self.multiSelectInitOptions = {
+            includeSelectAllOption: true,
+            enableFiltering: true
+        };
+
+        self.selectedItems = ko.observableArray([]);
+		
+        return self;
+    };
+
+    var vm1 = new viewModel1();
+    var vm2 = new viewModel2();
+    ko.applyBindings(vm1, $('#vm1')[0]);
+    ko.applyBindings(vm2, $('#vm2')[0]);
 </script>
\ No newline at end of file