禁用jQuery的组合框，当底层的DropDownList被禁用

问题描述

我已经转换了几DropDownLists到jQuery的组合框但是增加自动完成功能等，也有在codebehind文件的各种方法来禁用下拉列表。

I have converted a few DropDownLists to jQuery comboboxes to add auto complete functionality etc. however, there are various methods in the codebehind file to disable the drop down lists.

这并不因此该值仍然可以改变禁用jQuery的组合框。

This does not disable the jQuery combobox so the value can still be changed.

有没有组合框绑定到下拉列表中启用/禁用事件的方法吗？这样他们就可以自动更新基于源下拉列表？

Is there a way to bind the combobox to the dropdown list enable / disabled event? so they can update automatically based on the source drop down list?

推荐答案

好吧，我想我已经通过编辑js文件创建的组合框拿出一个解决方案 - 你可能认识的大部分脚本在转向组合框。我添加的行用**开头和结尾都强调（我试图让它黑体）

Ok, I think I have come up with a solution by editing the js file for creating the combo box - you may recognise most of the script to turn in to a combo box. I have highlighted the added lines with ** ** at the beginning and end (I was trying to make it bold)

(function ($) {
    $.widget("ui.combobox", {
        _create: function () {
            var self = this,
                     select = this.element.hide(),
                     selected = select.children(":selected"),
                     value = selected.val() ? selected.text() : "";
            **var disabled = select.is(':disabled');**
            var dropDownListID = this.element.context.id;
            var input = this.input = $("<input>")
                     .insertAfter(select)
                     .val(value)
                     .autocomplete({
                         delay: 0,
                         minLength: 0,
                         source: function (request, response) {
                             var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                             response(select.children("option").map(function () {
                                 var text = $(this).text();
                                 if (this.value && (!request.term || matcher.test(text)))
                                     return {
                                         label: text.replace(
                                             new RegExp(
                                                 "(?![^&;]+;)(?!<[^<>]*)(" +
                                                 $.ui.autocomplete.escapeRegex(request.term) +
                                                 ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                             ), "<strong>$1</strong>"),
                                         value: text,
                                         option: this
                                     };
                             }));
                         },
                         select: function (event, ui) {
                             ui.item.option.selected = true;
                             self._trigger("selected", event, {
                                 item: ui.item.option
                             }
                             );
                             __doPostBack(dropDownListID, '');
                         },
                         change: function (event, ui) {
                             if (!ui.item) {
                                 var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                     valid = false;
                                 select.children("option").each(function () {
                                     if ($(this).text().match(matcher)) {
                                         this.selected = valid = true;
                                         return false;
                                     }
                                 });
                                 if (!valid) {
                                     // remove invalid value, as it didn't match anything
                                     $(this).val("");
                                     select.val("");
                                     input.data("autocomplete").term = "";
                                     return false;
                                 }
                             }
                         }
                     })
                     .addClass("ui-widget ui-widget-content ui-corner-left")
                     **.attr('disabled', disabled)**
                     .click(function () { $(this).select(); });

            input.data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                         .data("item.autocomplete", item)
                         .append("<a>" + item.label + "</a>")
                         .appendTo(ul);
            };

            this.button = $("<button type='button' style='width:25px; height:25px;' >&nbsp;</button>")
                     .attr("tabIndex", -1)
                     .attr("title", "Show All Items")
                     **.attr('disabled', disabled)**
                     .insertAfter(input)
                     .button({
                         icons: {
                             primary: "ui-icon-triangle-1-s"
                         },
                         text: false
                     })
                     .removeClass("ui-corner-all")
                     .addClass("ui-corner-right ui-button-icon")
                     .click(function () {
                         // close if already visible
                         if (input.autocomplete("widget").is(":visible")) {
                             input.autocomplete("close");
                             return;
                         }

                         // work around a bug (likely same cause as #5265)
                         $(this).blur();

                         // pass empty string as value to search for, displaying all results
                         input.autocomplete("search", "");
                         input.focus();
                     });
        },

        destroy: function () {
            this.input.remove();
            this.button.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

这篇关于禁用jQuery的组合框，当底层的DropDownList被禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！