2

最初，“发票行”容器中的所有输入字段都被禁用，除了第一个。当用户在属于第一个“发票行”的任何字段中输入任何文本时，我希望启用第二个发票行输入。当用户将任何文本插入第二个发票行的任何输入字段时，我希望第三个发票行的输入字段启用。

我制定了一些应该工作来完成此任务的 jquery，它确实可以，但仅适用于第一个发票行。换句话说，一旦事件被触发一次，就再也不会被触发。如果是这样，我的问题将得到解决，因为我的代码似乎可以正常工作，但只有第一个 invoice-line 元素的“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>';
}
?>

查询：

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

2 回答 2

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

小提琴 ​</p>

也将其更改为 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);
});

小提琴

编辑：

试试这个：

$('.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);
});
于 2012-12-08T16:52:21.497 回答
0

试试这个代码：

          // 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();
});
于 2012-12-08T17:42:57.790 回答