2

最初は、「invoice-line」コンテナのすべての入力フィールドは、最初のフィールドを除いて無効になっています。ユーザーが最初の「請求書行」に属するフィールドのいずれかにテキストを入力すると、2番目の請求書行入力が有効になります。ユーザーが2番目の請求書行の入力フィールドのいずれかにテキストを挿入すると、3番目の請求書行の入力フィールドが有効になります。

私はこれを達成するために機能する必要があるいくつかのjqueryを作成しましたが、それは最初の請求書行に対してのみ機能します。つまり、イベントが1回トリガーされると、再度トリガーされることはありません。もしそうなら、私のコードは正しく機能しているように見えますが、最初の請求書行要素の「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');
});
4

2 に答える 2

1

1対多があり、ラッパーparent()をターゲットにしてからを見つけます。おそらく探しているのは、実際には次のdivであり、次に含まれている入力などです。invoice-linenext() invoice-line

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

フィドル </p>

また、次の入力のアクティブ化をトリガーするためにぼかしイベントを必要としないように、キーアップに変更しました。

編集：

コメントによると、多分これはあなたが求めているものですか？

$('.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 に答える