Merge pull request #1162 from s-eckard/master

Fix disabledText option which was displayed for enabled dropdowns

Author: davidstutz

dist/js/bootstrap-multiselect.js

@@ -248,35 +248,33 @@
              * @param {jQuery} select
              * @returns {String}
              */
-            buttonText: function (options, select) {
-                if (this.disabledText.length > 0
-                    && (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) {
-
+            buttonText: function (selectedOptions, select) {
+                if (this.disabledText.length > 0 && select.prop('disabled')) {
                     return this.disabledText;
                 }
-                else if (options.length === 0) {
+                else if (selectedOptions.length === 0) {
                     return this.nonSelectedText;
                 }
                 else if (this.allSelectedText
-                    && options.length === $('option', $(select)).length
+                    && selectedOptions.length === $('option', $(select)).length
                     && $('option', $(select)).length !== 1
                     && this.multiple) {
 
                     if (this.selectAllNumber) {
-                        return this.allSelectedText + ' (' + options.length + ')';
+                        return this.allSelectedText + ' (' + selectedOptions.length + ')';
                     }
                     else {
                         return this.allSelectedText;
                     }
                 }
-                else if (this.numberDisplayed != 0 && options.length > this.numberDisplayed) {
-                    return options.length + ' ' + this.nSelectedText;
+                else if (this.numberDisplayed != 0 && selectedOptions.length > this.numberDisplayed) {
+                    return selectedOptions.length + ' ' + this.nSelectedText;
                 }
                 else {
                     var selected = '';
                     var delimiter = this.delimiterText;
 
-                    options.each(function () {
+                    selectedOptions.each(function () {
                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
                         selected += label + delimiter;
                     });
@@ -1617,6 +1615,8 @@
             this.$select.prop('disabled', false);
             this.$button.prop('disabled', false)
                 .removeClass('disabled');
+            
+            this.updateButtonText();
         },
 
         /**
@@ -1626,6 +1626,8 @@
             this.$select.prop('disabled', true);
             this.$button.prop('disabled', true)
                 .addClass('disabled');
+            
+            this.updateButtonText();
         },
 
         /**

dist/js/bootstrap-multiselect.min.js

@@ -23,7 +23,8 @@ describe('Bootstrap Multiselect "Core".', function() {
             },
             checkboxName: function($option) {
                 return 'value-' + $($option).attr('value');
-            }
+            },
+            disabledText: "Disabled"
         });
     });
 
@@ -110,6 +111,7 @@ describe('Bootstrap Multiselect "Core".', function() {
         $('#multiselect').multiselect('disable');
 
         expect($('#multiselect').prop('disabled')).toBe(true);
+        expect($('#multiselect-container button .multiselect-selected-text').text()).toBe('Disabled');
     });
 
     it('Should be able to enable the multiselect', function() {
@@ -415,7 +417,7 @@ describe('Bootstrap Multiselect "Single Selection".', function() {
 
 describe('Bootstrap Multiselect "Individual Configuration Options".', function() {
 
-    describe('disableIfEmpty.', function() {
+    describe('disableIfEmpty without options.', function() {
 
         var $select = null;
         beforeEach(function() {
@@ -425,12 +427,14 @@ describe('Bootstrap Multiselect "Individual Configuration Options".', function()
 
             $select.multiselect({
                 buttonContainer: '<div id="multiselect-container"></div>',
-                disableIfEmpty: true
+                disableIfEmpty: true,
+                disabledText: 'Disabled'
             });
         });
 
-        it('Should disable button if emppty.', function() {
+        it('Should disable button if empty.', function() {
             expect($('#multiselect-container button').prop('disabled')).toBe(true);
+            expect($('#multiselect-container button .multiselect-selected-text').text()).toBe('Disabled');
         });
 
         it('Should still be disabled after invoking rebuild.', function() {
@@ -461,6 +465,35 @@ describe('Bootstrap Multiselect "Individual Configuration Options".', function()
             $('#multiselect').remove();
         });
     });
+
+    describe('disableIfEmpty with options.', function() {
+
+        var $select = null;
+        beforeEach(function() {
+            $select = $('<select id="multiselect" multiple="multiple"></select>');
+            $select.append('<option value="value-1">Option 1</option>');
+            $select.append('<option value="value-2">Option 2</option>');
+            $select.append('<option value="value-3">Option 3</option>');
+
+            $('body').append($select);
+
+            $select.multiselect({
+                buttonContainer: '<div id="multiselect-container"></div>',
+                disableIfEmpty: true,
+                nonSelectedText: 'Enabled'
+            });
+        });
+
+        it('Should enable button.', function() {
+            expect($('#multiselect-container button').prop('disabled')).toBe(false);
+            expect($('#multiselect-container button .multiselect-selected-text').text()).toBe('Enabled');
+        });
+
+        afterEach(function() {
+            $('#multiselect').multiselect('destroy');
+            $('#multiselect').remove();
+        });
+    });
 });
 
 describe('Bootstrap Multiselect "individual Methods".', function() {