jQuery事件仅触发一次，即使多次触发也是如此

Question

Initially, all input fields in the 'invoice-line' containers are disabled except the first one. When a user inputs any text into any of the fields belonging to the first 'invoice-line', I would like for the second invoice-line inputs to become enabled. When a user inserts any text into any of the input fields of the second invoice line I would like for the third invoice line's input fields to become enabled.

I worked out some jquery that SHOULD work to accomplish this, and it DOES but only for the first invoice-line. In other words, once the event is triggered once, it is never triggered again. If it was, my problem would be solved, as my code seems to work correctly but only 'onChange' of the first invoice-line element.

I have been trying to solve this one for a long long time, I would greatly appreciate any help with this.

Markup:

<?php for($i=0; $i < 20; $i++){
    echo '
    <div class="invoice-line">
        <div class="prod-id-cell"><input type="text" class="prod-id-input"></div>
        <div class="prod-name-cell">
            <input onKeyPress="search(this.value)" type="text" class="prod-name-input"/>
            <div class="smart-suggestions">
                    <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
            </div>
        </div>
        <div class="price-cell"><input class="price-input" type="text" /></div>
        <div class="unit-price-cell"><input class="unit-price-input" type="text" /></div>
        <div class="num-kits-cell"><input class="num-kits-input" type="text" /></div>
        <div class="amount-cell"><input class="amount-input" type="text" /></div>
    </div>';
}
?>

JQuery:

//regulate what lines are enabled / disabled
$('.invoice-line div input').attr('disabled','disabled');
$('.invoice-line:first div input').removeAttr('disabled');

$('.invoice-line div input').change(function(){
    $(this).parent().parent('.invoice-line').next().find('input').removeAttr('disabled');
});

Answer 1

There is one parent() to many, targeting the invoice-line wrapper, then finding the next() invoice-line , and what your probably looking for is really the next div and then the containing input etc :

$('.invoice-line input').not(':first').prop('disabled',true)
                        .end().on('keyup', function() {
    $(this).closest('div').next().find('input').prop('disabled', false);
});

FIDDLE​

Also changed it to keyup, so as to not need a blur event to trigger the activation of the next input.

EDIT:

according to the comments, maybe this is what you're after ?

$('.invoice-line').not(':first').find('input').prop('disabled',true);

$('input', '.invoice-line').on('keyup', function() {
    $(this).closest('.invoice-line').next('.invoice-line').find('input').prop('disabled', false);
});

FIDDLE

EDIT:

Try this one:

$('.invoice-line').not(':first').find('input').prop('disabled',true);

$(document).on('keyup', '.invoice-line input', function() {
    $(this).closest('.invoice-line').next('.invoice-line').find('input').prop('disabled', false);
});

Answer 2

Try with this code:

          // first all the inputs in the .invoice-line get disabled
$('.invoice-line input[type="text"]').attr("disabled","disabled");
         // then the first of all in this becomes enabled 
$('.invoice-line input[type="text"]:first').removeAttr('disabled');

         // then on change next input will be enabled for inputing the values
$('.invoice-line input[type="text"]').change(function(){
    $(this).parent().next().find('input').removeAttr('disabled').focus();
});