harvesthq/chosen — Issue #311: Disabled multi search prevents click events to parts of widget
Author: agad
Created: 2011-10-21 16:45:43+00:00
State: open

I recently wanted to capture the click event on a disabled select. The reason I wanted to do this is that we want to give the user an alert if they try to click and interact with a disabled select so we can tell them why it is disabled. Anyway, easy enough to add a click event on chzn wrapper. Unfortunately, the disabled input within the search wrapper can't have an event attached to it in Chrome and Opera (maybe IE as well). So, what happens is that the click event works on certain parts of the chosen widget but not on others. To resolve this, I added the following code. By creating this overlay, click events now can bubble up to the parent wrapper. No idea if you want to implement this, but thought I would post in case it was useful.

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);
var parent = this.search_field.parent(); // added
parent.append("

"); //added
parent.find("div").css({
// position the overlay in the same real estate as the original parent element
position: "absolute"
, top: parent.position().top
, left: parent.position().left
, width: parent.outerWidth()
, height: parent.outerHeight()
, zIndex: 10000
// IE needs a color in order for the layer to respond to mouse events
, backgroundColor: "#fff"
// set the opacity to 0, so the element is transparent
, opacity: 0
}); // added

if (!this.is_multiple) {
this.selected_item.unbind("focus", this.activate_action);
}
return this.close_field();
} else {
this.container.removeClass('chzn-disabled');
this.container.find('.chzn-disabledoverlay').remove(); //added
this.search_field.attr('disabled', false);
if (!this.is_multiple) {
return this.selected_item.bind("focus", this.activate_action);
}
}
};