啓用輸入字段X + 1 on輸入字段X的變化

Question

因此，每個「特殊輸入」div都包含一個輸入字段。我試圖調整每個信息何時可以輸入到每個輸入字段。

最初，我希望啓用頂部的第一個輸入字段，而其下面的其他輸入字段將被禁用。

OnChange輸入字段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/

Answer 2

我沒有測試下面的代碼，而應該是這個樣子：

$(".special-input").bind("change",function(event){ 
    $(this).attr("disabled","disabled"); 
    $(this).next().removeAttr("disabled").focus(); 
});