1

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

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

输入字段 1 的 OnChange，我希望启用它下面的下一个输入字段，而其余的则禁用。输入字段 2 的 OnChange，我希望输入字段 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>
4

2 回答 2

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/上的示例

于 2012-12-08T02:30:19.253 回答
0

我没有测试以下代码，但应该看起来像这样：

$(".special-input").bind("change",function(event){
    $(this).attr("disabled","disabled");
    $(this).next().removeAttr("disabled").focus();
});
于 2012-12-08T02:19:13.913 回答