Jquery selected by disabled option

Question

I have a choice with some options:

<select id="select"> <option>1</option> <option disabled="true">2</option> <option>3</option> </select> 

I am using Chosen Plugin for jQuery and the problem is that disabled options are removed from the view. But I need to show it as insecure disabled items.

Is there any chance with the selected jquery plugin?

- An example is converted to:

  <ul class="chzn-results"> <li id="location_select_chzn_o_0" class="active-result result-selected">1</li> <li id="location_select_chzn_o_2" class="active-result">3</li> </ul> 

Thus, the secound element does not become invisible, it simply does not exist.

Answer 1

You will need to edit the plugin as described here:

http://bitsmash.wordpress.com/2012/10/01/making-disabled-elements-visible-with-the-jquery-chosen-plugin/

The plugin reads in select, removes it from the DOM, and adds a new ul. Parameters marked "Disabled" are skipped when li is added to the new ul

Here is the method of interest in selected.jquery.js

 AbstractChosen.prototype.result_add_option = function(option) { var classes, style; if (!option.disabled) { option.dom_id = this.container_id + "_o_" + option.array_index; classes = option.selected && this.is_multiple ? [] : ["active-result"]; if (option.selected) classes.push("result-selected"); if (option.group_array_index != null) classes.push("group-option"); if (option.classes !== "") classes.push(option.classes); style = option.style.cssText !== "" ? " style=\"" + option.style + "\"" : ""; return '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '"' + style + '>' + option.html + '</li>'; } else { return ""; } }; 

Please note that if the parameter is disabled, it does not return anything. Take the line

 return ""; 

and put in the html / css that you would like for the disabled element. Or you can remove the if (! Option.disabled) block and add a new if (! Option.disabled) block, which will add a special CSS class if the element is disabled.

Then you need to make sure that when users click on a disabled item, nothing happens. You need to edit this method:

  Chosen.prototype.result_select = function(evt) { var high, high_id, item, position; if (this.result_highlight) { high = this.result_highlight; high_id = high.attr("id"); this.result_clear_highlight(); if (this.is_multiple) { this.result_deactivate(high); } else { this.search_results.find(".result-selected").removeClass("result-selected"); this.result_single_selected = high; this.selected_item.removeClass("chzn-default"); } high.addClass("result-selected"); position = high_id.substr(high_id.lastIndexOf("_") + 1); item = this.results_data[position]; item.selected = true; this.form_field.options[item.options_index].selected = true; if (this.is_multiple) { this.choice_build(item); } else { this.selected_item.find("span").first().text(item.text); if (this.allow_single_deselect) this.single_deselect_control_build(); } if (!(evt.metaKey && this.is_multiple)) this.results_hide(); this.search_field.val(""); if (this.is_multiple || this.form_field_jq.val() !== this.current_value) { this.form_field_jq.trigger("change", { 'selected': this.form_field.options[item.options_index].value }); } this.current_value = this.form_field_jq.val(); return this.search_field_scale(); } }; 

Add a block that says if it is disabled, returns false, and then when users click on this element, nothing will happen.

Answer 2

The nicholmikey method is correct, but here is the code you need to replace in selected.jquery.js. These are just a few simple lines (see below). Hope this helps.

 AbstractChosen.prototype.result_add_option = function(option) { var classes, style; option.dom_id = this.container_id + "_o_" + option.array_index; classes = option.selected && this.is_multiple ? [] : ["active-result"]; if (option.selected) { classes.push("result-selected"); } if (option.group_array_index != null) { classes.push("group-option"); } // THIS IS NEW --------------- if (option.disabled) { classes.push("disabled"); } // --------------------------- if (option.classes !== "") { classes.push(option.classes); } style = option.style.cssText !== "" ? " style=\"" + option.style + "\"" : ""; return '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '"' + style + '>' + option.html + '</li>'; }; 

and this one

 Chosen.prototype.result_select = function(evt) { var high, high_id, item, position; if (this.result_highlight) { high = this.result_highlight; high_id = high.attr("id"); this.result_clear_highlight(); if (this.is_multiple) { this.result_deactivate(high); } else { this.search_results.find(".result-selected").removeClass("result-selected"); this.result_single_selected = high; this.selected_item.removeClass("chzn-default"); } high.addClass("result-selected"); position = high_id.substr(high_id.lastIndexOf("_") + 1); item = this.results_data[position]; // THIS IS NEW --------------- if(this.form_field.options[item.options_index].disabled){ return false; } // --------------------------- item.selected = true; this.form_field.options[item.options_index].selected = true; if (this.is_multiple) { this.choice_build(item); } else { this.selected_item.find("span").first().text(item.text); if (this.allow_single_deselect) this.single_deselect_control_build(); } if (!(evt.metaKey && this.is_multiple)) this.results_hide(); this.search_field.val(""); if (this.is_multiple || this.form_field_jq.val() !== this.current_value) { this.form_field_jq.trigger("change", { 'selected': this.form_field.options[item.options_index].value }); } this.current_value = this.form_field_jq.val(); return this.search_field_scale(); } }; 

Finally, to smooth them, I added this css ...

 .chzn-results .disabled{color:#CCC;}