javascript - 输入字段 X 更改时启用输入字段 X+1

Question

因此每个“特殊输入”div 都包含一个输入字段。我正在尝试规范何时可以将每个信息输入到每个输入字段中。

最初，我希望启用顶部的第一个输入字段，而禁用其下方的其余输入字段。

当输入字段 1 发生更改时，我希望启用其下方的下一个输入字段，而禁用其余输入字段。 OnChange 输入字段 2，我希望输入字段 3 变为启用状态，而其余部分保持禁用状态，等等...

我知道我可以在需要时使用 JQuery 的 attr() 来启用输入字段，但我不确定如何应用逻辑来完成此操作，因为 JQuery 对我来说相当新。

<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();
            });
        });​

编辑:您可以在http://jsfiddle.net/dFZEq/11/处看到一个工作示例。

编辑2:

要在满足特定条件后启用下一行的元素集，请使用:

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();
    }
});​

示例位于 http://jsfiddle.net/tFG5W/