Question

So every ‘special-input’ div contains an input field. I am trying regulate when each information can be entered into each input field.

Initially, I would like the first input field from the top to be enabled, while the rest of the input fields below it be disabled.

OnChange of input field 1, I would like for the next input field below it to be enabled, while the rest disabled. OnChange of input field 2, I would like for input field 3 to become enabled, while the rest remain disabled, etc…

I know I can use JQuery’s attr() to enable input fields when needed, but I am unsure how to apply the logic to accomplish this as JQuery is quite new to me.

<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
<div class="special-input"><input type="text" /></div>
...... 
...... 
......
<div class="special-input"><input type="text" /></div>

Answer 1

    // Cache the inputs, this is a good way to improve performance of your 
    // jQuery code when re-using selectors.
        var $inputs = $('.special-input :input');
    // Disable all except the first input
        $inputs.not(':first').attr('disabled', 'disabled');
        $inputs.each(function(i) {
    // For each input, bind a change event to enable the next input, 
    // if the user presses enter, the next textbox will receive focus. if the user
    // presses tab, the following input won't receive focus, so you'll have to add 
    // code if you want this to work.
            $(this).on('change', function() {
                // Get the index of the current input element we're looking at,
                // We need to re-wrap the $input[i] element as it is now a normal 
                // DOM element.
                var $nextInput = $($inputs[i + 1]);
                $nextInput.removeAttr('disabled').focus();
            });
        });​

Edit: You can see a working example at http://jsfiddle.net/dFZEq/11/

Edit 2:

To enable the next line’s set of elements after a certain condition is met, use this:

var $specialInputs = $('.special-input');

// don't disable the first line's input elements.
$specialInputs.not(':first').find(':input').attr('disabled', 'disabled');

$specialInputs.on('change', function() {
    var $this = $(this);

    if ($this.find(':input').filter(function() {
        // you can change this filter to match any condition you 
        // like, for now we'll just make sure all inputs have a non-empty value
        return $(this).val() == '';
    }).length == 0) {

        var $nextInputSet = $($specialInputs[$this.index() + 1]).find(':input');

        // enable the next set of elements
        $nextInputSet.removeAttr('disabled');

        // focus your element here, requires more work
        $nextInputSet.first().focus();
    }
});​

Example at http://jsfiddle.net/tFG5W/