特定のINPUTが入力（変更）されたら、それ以降のフォームを入力可能にするスクリプトを書きたいです。

Question

特定のINPUTが入力（変更）されたら、それ以降のフォームを入力可能にするスクリプトを書きたいです。
以下の様に書いてみたのですが動作しません。ちなみにここには書いていない他のスクリプトは動作しているので、下記のコードに問題があると思いますが、それ以上がわかりません。

プログラミング初心者で要領を得なかったり、見当違いなことも多いと思いますが、どうか先輩方のお力添えを宜しくお願い致します。

<!--jQuery読み込み等は省略-->
<!--省略-->
<input type="text" name="input1" class="checkInput">
<input type="text" name="input2" class="targetInput" disabled>
<input type="text" name="input3" class="targetInput" disabled>

$(function(){
  $(document).on("change", ".checkInput", function() {
    var checkInputCount = $(this).value.length;
    var targetInput = $(this).nextAll('.targetInput');
    if(checkInputCount > 0){
      targetInput.removeAttr('disabled');
    }else {
      targetInput.attr('disabled','disabled');
    }
  });
});

Answer 1

ここで length なんて無いと出てきます。

var checkInputCount = $(this).value.length;

今のブラウザなら開発者ツール的なものがあるはずなんでそれでデバッグしてみて下さい。
これはWindows版Chromeの開発者ツール。

検索キーワード: chrome 開発者ツール 使い方

考え方としては、【lengthがない→じゃあvalueはどうなっている？】と辿って行くと仕組みが分かると思います。
今回のデバッグでは console.log($(this)) を使うと色々見えてくるかと思います。

Comments

[kazuki.o]

デバッグ方法から検索方法まで丁寧に教えていただきありがとうございます！