禁用底层 DropDownList 时禁用 jQuery ComboBox

Question

我已经将一些 DropDownLists 转换为 jQuery 组合框以添加自动完成功能等。但是，代码隐藏文件中有多种方法可以禁用下拉列表。

这不会禁用 jQuery 组合框，因此仍然可以更改值。

有没有办法将组合框绑定到下拉列表启用/禁用事件？以便他们可以根据源下拉列表自动更新？

Answer 1

好的，我想我已经通过编辑用于创建组合框的 js 文件想出了一个解决方案 - 您可能会认出大部分脚本来转换为组合框。我在开头和结尾用 ** ** 突出显示了添加的行（我试图使其加粗）

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