2011-12-16 2 views
2

Я преобразовал несколько списков DropDownLists в комбобокс jQuery, чтобы добавить автоматическую полную функциональность и т. Д. Однако в файле codebehind есть различные методы, чтобы отключить выпадающие списки.Отключить jQuery ComboBox, когда базовый DropDownList отключен

Это не отключает поле со списком jQuery, поэтому значение все равно можно изменить.

Есть ли способ привязать выпадающий список к событию включения/отключения списка выпадающего списка? поэтому они могут автоматически обновляться в зависимости от раскрывающегося списка источника?

ответ

2

ОК, я думаю, что я придумал решение, отредактировав файл 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);