Question

最初，'invoice-line'容器中的所有输入字段都是已禁用，第一个除外。当用户将任何文本输入到属于第一个“发票行”的任何字段时，我希望第二个发票行输入变为启用状态。当用户将任何文本插入第二个发票行的任何输入字段时，我希望第三个发票行的输入字段变为启用状态。

我制定了一些应该完成此工作的jquery，它只适用于第一个发票行。换句话说，一旦事件被触发一次，它就再也不会被触发。如果是，我的问题将得到解决，因为我的代码似乎正常工作，但只有第一个发票行元素的'onChange'。

我一直在努力解决这个问题很长一段时间，我非常感谢你提供帮助。

标记：

<?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

有一个parent()到多个，定位invoice-line包装，然后找到next() invoice-line，你可能正在寻找的是下一个div，然后包含输入等：

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

FIDDLE

还将其更改为keyup，以便不需要模糊事件来触发下一次输入的激活。

修改

根据评论，也许这就是你之后的事情？

$('.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

修改

试试这个：

$('.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

尝试使用此代码：

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

JQuery事件只触发一次，即使它被触发不止一次

2 个答案: