CODEWITHSUNDEEP
jquery
AwesomeTown
AwesomeTown

Reputation: 2880

Disable other text boxes on input using jQuery

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.

Upvotes: 2

Views: 20539

Answers (4)

Paolo Bergantino
Paolo Bergantino

Reputation: 488374

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

$(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. :text is shorthand for what you want, if are you sticking to selecting them that way.
  • I also think you want the keyup event instead of keypress.

Upvotes: 7

Adam Lassek
Adam Lassek

Reputation: 35505

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

Upvotes: 1

Josh Stodola
Josh Stodola

Reputation: 82483

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.

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

Upvotes: 2

yoavf
yoavf

Reputation: 21213

Use the not selector

Upvotes: 0

Related Questions