Question

我选择了一些选项：

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

我正在为jQuery使用Chosen Plugin，问题是从视图中删除了禁用的选项。但我需要将其显示为无法忽略的禁用元素。

有没有机会选择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>

因此，secound元素不是不可见的，它根本就不存在。

Answer 1

nicholmikey的方法是正确的，但这里是你需要在selected.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;}

Answer 2

您需要按照此处所述编辑插件：

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

插件读取一个select，将其从DOM中删除，然后添加一个新的ul。将li添加到新ul

时，会跳过标记为“已禁用”的选项

以下是selected.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）块，并添加一个新的if（！option.disabled）块，如果禁用该项，则添加一个特殊的CSS类。

接下来，您需要确保用户点击禁用的项目时没有任何反应。您需要编辑此方法：

 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，然后当用户点击该项时，不会发生任何事情。

jquery选择禁用选项

2 个答案: