jQuery的选择上禁用选项

Question

我有一个选择一些选项的：

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

我使用的是选上的jQuery插件，问题是，禁用选项从视图中删除。但我需要将它显示为不可禁用的禁用元素。

jquery选择插件有没有机会？

- 的例子将转换为：

<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> 

所以谢胜利元素不发unvisible，它根本不存在。

Answer 1

您需要编辑插件作为这里概述：

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

该插件在选择读取，从DOM中删除，并增加了一个新的UL。选项标记为“已禁用”，并称李时新UL

这里是兴趣chosen.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 ""; 
    } 
}; 

注意，如果一个选项被禁用它没有返回值被跳过。采取行

return ""; 

并放在html/css你想为一个禁用的项目。或者，您可以删除if（！option.disabled）块，并添加一个新的if（！option.disabled）块，以便在禁用该项时添加特殊的CSS类。

接下来，您需要确保用户单击禁用的项目时什么都不会发生。你需要编辑这个方法：

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(); 
    } 
}; 

补充一点说，如果禁用，则返回false，那么当用户在该项目上什么都不会发生单击一个块。

Answer 2

nicholmikey的方法是正确的，但这里是你需要在chosen.jquery.js中替换的代码这只是几条简单的线条（下面评论）。希望这可以帮助。

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>'; 
}; 

这

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(); 
    } 
}; 

最后为灰色出来我加入这个CSS ...

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