使用 jQuery 在输入时禁用其他文本框

Disable other text boxes on input using jQuery

提问by AwesomeTown

I've got a form with several search (text) fields. When text is entered into one of the fields, I'd like to disable the others. Conversely, if all text is removed from the active text field, the other fields should be re-enabled.

我有一个包含多个搜索（文本）字段的表单。当文本输入到其中一个字段中时，我想禁用其他字段。相反，如果从活动文本字段中删除所有文本，则应重新启用其他字段。

The basic idea would be something like this (I think):

基本的想法是这样的（我认为）：

$(document).ready(function() {
    $("input[@type=text]").keypress(function(e) {
        if(current textbox has text in it)
        {
            //disable all textboxes that aren't this one
        }
        else
        {
            //enable all textboxes
        }
    });
});

I'm not clear on what the easiest way to find/work with "all text boxes that aren't this one" is.

我不清楚查找/使用“不是这个的所有文本框”的最简单方法是什么。

回答by Paolo Bergantino

I think the best way to do "all textboxes that aren't this one" is using the notfilter like:

我认为做“不是这个的所有文本框”的最好方法是使用not过滤器，如：

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
        } else {
            $(":text").removeAttr('disabled');
        }
    });
});

Couple notes:

情侣笔记：

• I recommend giving a class to all the input elements you want to include with this behavior and doing a selector of input.myfields as it is faster/cleaner.
• Also, as of jQuery 1.3, the @in the selector is not supported. :textis shorthand for what you want, if are you sticking to selecting them that way.
• I also think you want the keyupevent instead of keypress.

• 我建议为要包含在此行为中的所有输入元素提供一个类，并执行 input.myfields 的选择器，因为它更快/更清晰。
• 此外，从 jQuery 1.3 开始，@不支持 in 选择器。:text是您想要的简写，如果您坚持以这种方式选择它们。
• 我也认为你想要这个keyup事件而不是keypress.

回答by Josh Stodola

I would just disable them all first, and then since the code to be executed is triggered by an event for the control, you can use the this keyword to reference the control with focus and re-enable it.

我会先将它们全部禁用，然后由于要执行的代码是由控件的事件触发的，因此您可以使用 this 关键字来引用具有焦点的控件并重新启用它。

$("input[@type=text]").attr("disabled", true);
$(this).attr("disabled", false);

回答by Adam Lassek

I'd attach the login to the focus/blur events instead:

我将登录附加到焦点/模糊事件：

$(function() {
    $(':text').focus(function() {
        $(':text').not(this).attr('disabled','disabled');
    }).blur(function {
        if (this.value.length == 0) {
            $(':text').removeAttr('disabled');
        }
    });
})

@attr selectors were deprecated in 1.2, and have been removed completely from 1.3. In this case you'll want to use :text

@attr 选择器在 1.2 中已被弃用，并已从 1.3 中完全删除。在这种情况下，您将需要使用 :text

回答by yoavf

Use the notselector

使用not选择器