javascript - テキストフィールドに入力した場合は、フォーム送信ボタンを無効にします

Question

基本的に「このテキストフィールドに入力されている場合は、送信ボタンを無効にして、フォームを配信/送信できないようにする」というJqueryを実装しようとしています。

これまで私はこれを思いついたが、それは機能していない

$(document).ready(function(){
$this = $("#inputValue");
 if($this.val().length>0){ 
$('input[type=submit]').attr('disabled', 'disabled');
 }  
});

フォームに入力し、フィールドにテキストを含めると、フォームが送信されないはずですが、何が間違っていますか？

ありがとう

Answer 1

コードは実行時に 1 回だけ実行されます。その後、再度チェックされることはありません。

$(document).ready(function (){
  $("#inputValue").on('change', function (){
    if($(this).val().length > 0){
      $('input[type=submit]').attr('disabled', 'disabled');
    } else {
      $('input[type=submit]').removeAttr('disabled');
    }
  });
});

または、@thomasfedb が提案したように:

$(document).ready(function (){
  $('#inputValue').on('change', function() {
    $("input[type=submit]").prop('disabled', $(this).val().length > 0);
  });
});

Answer 2

フィールドを使用しているので、イベントhiddenをバインドする方がよい場合があります。change

$('#inputValue').on('change', function() {
  $('input[type="submit"]').prop('disabled', this.value.length > 0);
}).change();

Answer 3

ユーザーがフィールドkeyupに何かを入力するたびにチェックを行うようにイベントをバインドすることをお勧めします。#inputValue

$(document).ready(function() {
    $("#inputValue").on("keyup", function() {
        $("input[type=submit]").prop("disabled", !!$.trim(this.value).length);
    }).trigger("keyup");
});

Answer 4

このコードを使用してみてください。

$('input[type=submit]').attr("disabled", true);