私はいくつかのオプションで選択を持っています：
<select id="select">
<option>1</option>
<option disabled="true">2</option>
<option>3</option>
</select>
jQueryにChosenPluginを使用していますが、問題は、無効になっているオプションがビューから削除されることです。ただし、クリックできない無効な要素として表示する必要があります。
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>
したがって、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;}
ここで概説されているようにプラグインを編集する必要があります：
プラグインはselectを読み込み、それをDOMから削除し、新しいulを追加します。新しいulにliを追加すると、「無効」とマークされたオプションはスキップされます
これが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）ブロックを削除し、アイテムが無効になっている場合に特別なCSSクラスを追加する新しいif（！option.disabled）ブロックを追加することもできます。
次に、ユーザーが無効なアイテムをクリックしても何も起こらないことを確認する必要があります。このメソッドを編集する必要があります：
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を返すというブロックを追加すると、ユーザーがそのアイテムをクリックしても何も起こりません。