Add support for disabled form fields.

chosen/chosen.css

@@ -303,6 +303,15 @@
 }
 /* @end */
 
+/* @group Disabled Support */
+.chzn-disabled {
+  cursor: default;
+  opacity:0.5 !important;
+}
+.chzn-disabled .chzn-single {
+  cursor: default;
+}
+
 /* @group Right to Left */
 .chzn-rtl { direction:rtl;text-align: right; }
 .chzn-rtl .chzn-single { padding-left: 0; padding-right: 8px; }

chosen/chosen.jquery.js

@@ -44,6 +44,9 @@
       this.click_test_action = __bind(function(evt) {
         return this.test_active_click(evt);
       }, this);
+      this.activate_action = __bind(function(evt) {
+        return this.activate_field(evt);
+      }, this);
       this.active_field = false;
       this.mouse_on_container = false;
       this.results_showing = false;
@@ -134,30 +137,44 @@
         return this.search_field.focus(__bind(function(evt) {
           return this.input_focus(evt);
         }, this));
+      }
+    };
+    Chosen.prototype.search_field_disabled = function() {
+      this.is_disabled = this.form_field_jq.attr('disabled');
+      if (this.is_disabled) {
+        this.container.addClass('chzn-disabled');
+        this.search_field.attr('disabled', true);
+        if (!this.is_multiple) {
+          return this.selected_item.unbind("focus", this.activate_action);
+        }
       } else {
-        return this.selected_item.focus(__bind(function(evt) {
+        this.container.removeClass('chzn-disabled');
-          return this.activate_field(evt);
+        this.search_field.attr('disabled', false);
-        }, this));
+        if (!this.is_multiple) {
+          return this.selected_item.bind("focus", this.activate_action);
+        }
       }
     };
     Chosen.prototype.container_mousedown = function(evt) {
-      if (evt && evt.type === "mousedown") {
+      if (!this.is_disabled) {
-        evt.stopPropagation();
+        if (evt && evt.type === "mousedown") {
-      }
+          evt.stopPropagation();
-      if (!this.pending_destroy_click) {
+        }
-        if (!this.active_field) {
+        if (!this.pending_destroy_click) {
-          if (this.is_multiple) {
+          if (!this.active_field) {
-            this.search_field.val("");
+            if (this.is_multiple) {
-          }
+              this.search_field.val("");
-          $(document).click(this.click_test_action);
+            }
-          this.results_show();
+            $(document).click(this.click_test_action);
-        } else if (!this.is_multiple && evt && ($(evt.target) === this.selected_item || $(evt.target).parents("a.chzn-single").length)) {
+            this.results_show();
-          evt.preventDefault();
+          } else if (!this.is_multiple && evt && ($(evt.target) === this.selected_item || $(evt.target).parents("a.chzn-single").length)) {
-          this.results_toggle();
+            evt.preventDefault();
+            this.results_toggle();
+          }
+          return this.activate_field();
+        } else {
+          return this.pending_destroy_click = false;
         }
-        return this.activate_field();
-      } else {
-        return this.pending_destroy_click = false;
       }
     };
     Chosen.prototype.mouse_enter = function() {
@@ -243,6 +260,7 @@
           }
         }
       }
+      this.search_field_disabled();
       this.show_search_field_default();
       this.search_field_scale();
       this.search_results.html(content);

chosen/chosen.proto.js

@@ -30,6 +30,9 @@
       this.click_test_action = __bind(function(evt) {
         return this.test_active_click(evt);
       }, this);
+      this.activate_action = __bind(function(evt) {
+        return this.activate_field(evt);
+      }, this);
       this.active_field = false;
       this.mouse_on_container = false;
       this.results_showing = false;
@@ -125,29 +128,43 @@
         return this.search_field.observe("focus", __bind(function(evt) {
           return this.input_focus(evt);
         }, this));
+      }
+    };
+    Chosen.prototype.search_field_disabled = function() {
+      this.is_disabled = this.form_field.disabled;
+      if (this.is_disabled) {
+        this.container.addClassName('chzn-disabled');
+        this.search_field.disabled = true;
+        if (!this.is_multiple) {
+          return this.selected_item.stopObserving("focus", this.activate_action);
+        }
       } else {
-        return this.selected_item.observe("focus", __bind(function(evt) {
+        this.container.removeClassName('chzn-disabled');
-          return this.activate_field(evt);
+        this.search_field.disabled = false;
-        }, this));
+        if (!this.is_multiple) {
+          return this.selected_item.observe("focus", this.activate_action);
+        }
       }
     };
     Chosen.prototype.container_mousedown = function(evt) {
-      if (evt && evt.type === "mousedown") {
+      if (!this.is_disabled) {
-        evt.stop();
+        if (evt && evt.type === "mousedown") {
-      }
+          evt.stop();
-      if (!this.pending_destroy_click) {
+        }
-        if (!this.active_field) {
+        if (!this.pending_destroy_click) {
-          if (this.is_multiple) {
+          if (!this.active_field) {
-            this.search_field.clear();
+            if (this.is_multiple) {
-          }
+              this.search_field.clear();
-          document.observe("click", this.click_test_action);
+            }
-          this.results_show();
+            document.observe("click", this.click_test_action);
-        } else if (!this.is_multiple && evt && (evt.target === this.selected_item || evt.target.up("a.chzn-single"))) {
+            this.results_show();
-          this.results_toggle();
+          } else if (!this.is_multiple && evt && (evt.target === this.selected_item || evt.target.up("a.chzn-single"))) {
+            this.results_toggle();
+          }
+          return this.activate_field();
+        } else {
+          return this.pending_destroy_click = false;
         }
-        return this.activate_field();
-      } else {
-        return this.pending_destroy_click = false;
       }
     };
     Chosen.prototype.mouse_enter = function() {
@@ -229,6 +246,7 @@
           }
         }
       }
+      this.search_field_disabled();
       this.show_search_field_default();
       this.search_field_scale();
       this.search_results.update(content);

coffee/chosen.jquery.coffee

@@ -31,6 +31,7 @@ class Chosen
   set_default_values: ->
     
     @click_test_action = (evt) => this.test_active_click(evt)
+    @activate_action = (evt) => this.activate_field(evt)
     @active_field = false
     @mouse_on_container = false
     @results_showing = false
@@ -105,24 +106,34 @@ class Chosen
     if @is_multiple
       @search_choices.click (evt) => this.choices_click(evt)
       @search_field.focus (evt) => this.input_focus(evt)
+
+  search_field_disabled: ->
+    @is_disabled = @form_field_jq.attr 'disabled'
+    if(@is_disabled)
+      @container.addClass 'chzn-disabled'
+      @search_field.attr 'disabled', true
+      @selected_item.unbind "focus", @activate_action if !@is_multiple
     else
-      @selected_item.focus (evt) => this.activate_field(evt)
+      @container.removeClass 'chzn-disabled'
+      @search_field.attr 'disabled', false
+      @selected_item.bind "focus", @activate_action if !@is_multiple
 
   container_mousedown: (evt) ->
-    if evt and evt.type is "mousedown"
+    if !@is_disabled
-      evt.stopPropagation()
+      if evt and evt.type is "mousedown"
-    if not @pending_destroy_click
+        evt.stopPropagation()
-      if not @active_field
+      if not @pending_destroy_click
-        @search_field.val "" if @is_multiple
+        if not @active_field
-        $(document).click @click_test_action
+          @search_field.val "" if @is_multiple
-        this.results_show()
+          $(document).click @click_test_action
-      else if not @is_multiple and evt and ($(evt.target) is @selected_item || $(evt.target).parents("a.chzn-single").length)
+          this.results_show()
-        evt.preventDefault()
+        else if not @is_multiple and evt and ($(evt.target) is @selected_item || $(evt.target).parents("a.chzn-single").length)
-        this.results_toggle()
+          evt.preventDefault()
+          this.results_toggle()
 
-      this.activate_field()
+        this.activate_field()
-    else
+      else
-      @pending_destroy_click = false
+        @pending_destroy_click = false
 
   mouse_enter: -> @mouse_on_container = true
   mouse_leave: -> @mouse_on_container = false
@@ -195,6 +206,7 @@ class Chosen
         else if data.selected and not @is_multiple
           @selected_item.find("span").text data.text
 
+    this.search_field_disabled()
     this.show_search_field_default()
     this.search_field_scale()
     
@@ -551,8 +563,7 @@ class Chosen
       when 40
         this.keydown_arrow()
         break
-
+  
-
   search_field_scale: ->
     if @is_multiple
       h = 0

coffee/chosen.proto.coffee

@@ -23,6 +23,7 @@ class Chosen
   set_default_values: ->
     
     @click_test_action = (evt) => this.test_active_click(evt)
+    @activate_action = (evt) => this.activate_field(evt)
     @active_field = false
     @mouse_on_container = false
     @results_showing = false
@@ -100,24 +101,33 @@ class Chosen
     if @is_multiple
       @search_choices.observe "click", (evt) => this.choices_click(evt)
       @search_field.observe "focus", (evt) => this.input_focus(evt)
-    else
-      @selected_item.observe "focus", (evt) => this.activate_field(evt)
 
+  search_field_disabled: ->
+    @is_disabled = @form_field.disabled
+    if(@is_disabled)
+      @container.addClassName 'chzn-disabled'
+      @search_field.disabled = true
+      @selected_item.stopObserving "focus", @activate_action if !@is_multiple
+    else
+      @container.removeClassName 'chzn-disabled'
+      @search_field.disabled = false
+      @selected_item.observe "focus", @activate_action if !@is_multiple
 
   container_mousedown: (evt) ->
-    if evt and evt.type is "mousedown"
+    if !@is_disabled
-      evt.stop()
+      if evt and evt.type is "mousedown"
-    if not @pending_destroy_click
+        evt.stop()
-      if not @active_field
+      if not @pending_destroy_click
-        @search_field.clear() if @is_multiple
+        if not @active_field
-        document.observe "click", @click_test_action
+          @search_field.clear() if @is_multiple
-        this.results_show()
+          document.observe "click", @click_test_action
-      else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
+          this.results_show()
-        this.results_toggle()
+        else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
+          this.results_toggle()
 
-      this.activate_field()
+        this.activate_field()
-    else
+      else
-      @pending_destroy_click = false
+        @pending_destroy_click = false
 
   mouse_enter: -> @mouse_on_container = true
   mouse_leave: -> @mouse_on_container = false
@@ -190,6 +200,7 @@ class Chosen
         else if data.selected and not @is_multiple
           @selected_item.down("span").update( data.html )
 
+    this.search_field_disabled()
     this.show_search_field_default()
     this.search_field_scale()