Question

I need to find a way to switch between four text inputs.

Example Usage:

Input Names:

input1a
input1b
input2a
input2b

A user can only enter text in either inputs a or inputs b.

If user clicks on input1a then he can only enter text in input1a and input2a. Input1b and input2b will have their values deleted and faded (ie: text input turns into regular labels) and vice-versa.

A user can also toggle between inputs a and b.

Is there a jquery code that does this? any help is appreciated.

Answer 1

I’m not clear on your html structure, but something like this seems to be what you describe:

$(function() {
    $('body').on('click', 'label', function() {
        if ($(this).next('input').hasClass('disabled')) {
            $('input').toggleClass('disabled').val('');
        }
    });
});

In this case, I am assuming you have labels, and the inputs are every other. .disabled is simply a class which hides the inputs.

Demo: http://jsfiddle.net/jtbowden/bKW4Q/

You probably don’t want to truly disable the inputs, because then they won’t fire click events. But, since you are clearing them, just make your disabled class gray them out:

Demo: http://jsfiddle.net/jtbowden/VWYpe/

This lets you click the inputs instead of the labels.