最初は、「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');
});