1

したがって、すべての 'special-input' div には入力フィールドが含まれます。各入力フィールドに各情報をいつ入力できるかを規制しようとしています。

最初に、上から 1 番目の入力フィールドを有効にし、その下の残りの入力フィールドを無効にしたいと考えています。

入力フィールド 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 に答える