jQuery UI自动完成组合框禁用输入

Question

我目前正在使用Jquery-UI自动完成插件combobox实现，但我更改了脚本，使插件添加的输入元素被禁用（用户无法在输入框中输入，只能点击按钮以查看选项），代码如下：

$.widget("ui.combobox", {

_create: function () {
    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? $.trim(selected.text()) : "";
    var input = this.input = $("<input>")
                .attr("name", select.attr("name"))
                .attr('disabled', true)
                .insertAfter(select)
                .val(value)
                .autocomplete({ .......

可能是因为输入框被禁用了，当我点击空白处或另一个下拉框时失去焦点后，下拉框没有隐藏（输入框元素有模糊事件处理程序，但它不会触发）。

是否有一种方法在禁用的输入元素上设置模糊事件或任何一种在用户想要失去焦点时隐藏下拉框的方法？

- Atzoya

---

嗨@Atzoya，我使用了你的方法，在FF中它运行良好，但我也将点击事件添加到输入控件中，以便如果用户单击输入，则下拉菜单出现。在FF中运行良好，但在IE9中，下拉菜单会跳出并再次消失。你是如何解决这个问题的？ - Jacques

我已经检查过了，我的应用程序也出现了同样的问题。我目前正忙于另一个项目，但是一旦我有时间，我会尽力找到解决这个问题的方法。如果我找到了，我会在这里发布。 - Atzoya

嗨@Atzoya，我注释掉了处理错误的行$(this).blur();，这解决了我的问题。在FF、Chrome、Safari和IE 7、8和9中都可以工作。不确定IE6是否可以。 - Jacques

Answer 1

我建议您重新考虑一下策略。自动完成不适用于 disabled 输入框。相反，我会使用 readonly。替换为：

.attr("disabled", true)

使用：

.attr("readonly", true)

你将在 input 中获得光标，但是你的原始需求已经满足。 示例： http://jsfiddle.net/S77xa/1/

- Andrew Whitaker

---

谢谢，但是当我有多个组合框时，选项卡索引不起作用！ - Rakesh Vadnal

Answer 2

试试这个。

$('comboboxname').combobox('disable');

$('comboboxname').combobox('enable');

- Elaine

Answer 3

你需要改变：

.attr("disabled", true);

翻译为：

.attr("disabled", "disabled");

请查看这个代码片段: http://jsfiddle.net/Lq8tq/1/

希望这可以帮到你！

- dSquared

---

这确实禁用了文本框，但是单击组合框外部的任何位置都不会关闭组合框。安德鲁的解决方案对我非常有效，无论如何感谢您的建议。 - Atzoya