jQuery elegido la opción desactivada

Question

Tengo un selecto con alguna opción de:

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

estoy usando Elegido plugin para jQuery y el problema es que las opciones de movilidad reducida se quitan de la vista. Pero necesito mostrarlo como elementos inhabilitados que no se pueden cliquear.

¿Hay alguna posibilidad con el plugin jquery elegido?

- El ejemplo sería transformado a:

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

Así el elemento secound no está hecho de Unvisible, simplemente no existe.

Answer 1

Usted tendrá que editar el plugin como se indica aquí:

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

El plugin lee en una selección, lo quita de la DOM, y añade una nueva ul. Las opciones marcadas "desactivada" se saltan cuando se añade a la nueva li ul

Aquí está el método de interés en 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 ""; 
    } 
}; 

Tenga en cuenta que si una opción está desactivada no devuelve nada. Tome la línea

return ""; 

y coloque el html/css que desea para un artículo deshabilitado. O bien, puede eliminar el bloque if (! Option.disabled) y agregar un nuevo bloque if (! Option.disabled) que agregue una clase CSS especial si el elemento está deshabilitado.

A continuación, debe asegurarse de que cuando los usuarios hagan clic en un elemento deshabilitado no ocurre nada. Hay que editar este método:

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

Añadir un bloque que dice, si es discapacitado, return false, entonces cuando los usuarios hacen clic en ese elemento no pasará nada.

Answer 2

El método de nicholmikey es correcto, pero aquí está el código que debe reemplazar en chosen.jquery.js. Son solo unas pocas líneas simples (comentadas a continuación). Espero que esto ayude.

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

y esto

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

último a gris a cabo añadí esto css ...

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