jquery für deaktivierte Option gewählt

Question

Ich habe eine select mit einigen Wahlen:

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

Ich verwende Chosen Plugin für jQuery und das Problem ist, dass behinderte Optionen aus der Ansicht entfernt werden. Aber ich muss es als unclickable deaktivierte Elemente zeigen.

Gibt es eine Chance mit jquery gewählten Plugin?

- Das Beispiel umgewandelt würde:

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

Also das secound Element nicht gemacht unvisible, es existieren einfach nicht.

Answer 1

Sie müssen das Plugin bearbeiten, wie hier skizziert:

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

Das Plugin liest in einem ausgewählten, entfernt es aus dem DOM, und fügt eine neue ul. Markiert Optionen „Disabled“ werden übersprungen, wenn li auf die neue ul

Zugabe

Hier wird das Verfahren von Interesse in 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 ""; 
    } 
}; 

Beachten Sie, dass, wenn eine Option deaktiviert ist es nichts zurückgibt. Nehmen Sie die Linie

return ""; 

und legen Sie die HTML/CSS, die Sie für ein deaktiviertes Element möchten. Oder Sie können den Block if (! Option.disabled) entfernen und einen neuen if (! Option.disabled) -Block hinzufügen, der eine spezielle CSS-Klasse hinzufügt, wenn das Element deaktiviert ist.

Als nächstes müssen Sie sicherstellen, dass wenn Benutzer auf ein deaktiviertes Element klicken nichts passiert. Sie müssen diese Methode bearbeiten:

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

einen Block hinzufügen, der sagt, wenn deaktiviert, falsch zurück, dann, wenn der Benutzer auf das Element nichts klicken passieren wird.

Answer 2

Nicholmikey's Methode ist korrekt, aber hier ist der Code, den Sie ersetzen müssen in "selected.jquery.js" Es sind nur ein paar einfache Zeilen (kommentiert unten). Hoffe das hilft.

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

und diese

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

Schließlich sie graut ich diesen CSS hinzugefügt ...

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