jquery chọn trên khuyết tật tùy chọn

Question

Tôi có một lựa chọn với một số tùy chọn của:

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

Tôi đang sử dụng Chosen Plugin for jQuery và vấn đề là lựa chọn tàn tật được đưa ra khỏi quan điểm. Nhưng tôi cần phải hiển thị nó như là các yếu tố vô hiệu hóa không thể nhấp.

Có cơ hội nào với plugin được chọn jquery không?

- Các ví dụ sẽ chuyển thành:

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

Vì vậy, các yếu tố secound không được thực hiện unvisible, nó chỉ đơn giản là không tồn tại.

Answer 1

Bạn sẽ cần phải chỉnh sửa các plugin như được nêu ở đây:

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

Plugin đọc trong một lựa chọn, loại bỏ nó từ DOM, và cho biết thêm một ul mới. Tùy chọn đánh dấu "Disabled" được bỏ qua khi thêm li đến ul mới

Dưới đây là phương pháp quan tâm trong 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 ""; 
    } 
}; 

Chú ý rằng nếu một tùy chọn vô hiệu hóa nó sẽ trả về không có gì. Đi theo dòng

return ""; 

và đặt vào html/css bạn muốn cho một mục bị vô hiệu hóa. Hoặc, bạn có thể loại bỏ khối if (! Option.disabled) và thêm một khối if (! Option.disabled) mới bổ sung một lớp CSS đặc biệt nếu mục đó bị vô hiệu hóa.

Tiếp theo, bạn cần đảm bảo khi người dùng nhấp vào một mục bị vô hiệu hóa không có gì xảy ra. Bạn cần phải chỉnh sửa phương thức này:

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

Thêm khối cho biết, nếu bị tắt, trả về false, khi người dùng nhấp vào mục đó, sẽ không có gì xảy ra.

Answer 2

phương pháp của nicholmikey là chính xác nhưng đây là mã bạn cần thay thế trong selected.jquery.js Nó chỉ là một vài dòng đơn giản (nhận xét dưới đây). Hi vọng điêu nay co ich.

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

và điều này

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

Cuối cùng xám chúng ra tôi đã thêm css này ...

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