jquery scelti sulla disabilitata l'opzione

Question

Ho un select con una certa discrezione di:

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

sto usando scelto Plugin per jQuery e il problema è che le opzioni con disabilità vengono rimossi dalla vista. Ma ho bisogno di mostrarlo come elementi disabilitati invalicabile.

C'è qualche possibilità con il plugin scelto da jquery?

- L'esempio sarebbe trasformato in:

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

Quindi l'elemento secound non è fatta unvisible, semplicemente non esiste.

Answer 1

Sarà necessario modificare il plugin come descritto qui:

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

Il plugin si legge in una selezione, rimuove dal DOM, e aggiunge un nuovo ul. Opzioni contrassegnati come "disabili" vengono saltati quando si aggiunge Li alla nuova ul

Ecco il metodo di interesse per 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 ""; 
    } 
}; 

Si noti che se un opzione è disabilitata restituisce nulla. Prendi la linea

return ""; 

e inserisci il codice html/css che desideri per un articolo disattivato. In alternativa, è possibile rimuovere il blocco if (! Option.disabled) e aggiungere un nuovo blocco if (! Option.disabled) che aggiunge una classe CSS speciale se l'elemento è disabilitato.

Successivamente, è necessario assicurarsi che quando gli utenti fanno clic su un elemento disattivato non accade nulla. E 'necessario modificare questo metodo:

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

Aggiungi un blocco che dice, se disabilitato, restituire false, poi, quando gli utenti fanno clic su tale elemento non accadrà nulla.

Answer 2

Il metodo di nicholmikey è corretto ma qui è il codice che è necessario sostituire in chosen.jquery.js Sono solo alcune semplici righe (commentate di seguito). Spero che questo ti aiuti.

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

e questo

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

Infine al grigio fuori ho aggiunto questo css ...

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