メソッドはOnLoad Jqueryとしか呼ばれません

Question

私は単純なユーザー入力テキストを作成しようとしていますが、問題を避けるために、テキストが入力されていなければ、送信ボタンをクリック解除できないようにします。入力中に、デフォルトではテキストが存在しないので、それはボタンが無効になりますので、これはonloadの作品

$(function() { 
    if ($("#formSearchUserId").val() == "") { 
    $('#userIdBtn').prop('disabled', true); 
    } else { 
    $('#userIdBtn').prop('disabled', false); 
    } 
}); 

：これは私がこれまで持っているものです。しかし、入力に値を入力すると、ボタンは無効のままです。

ご協力いただければ幸いです。

Answer 1

$("#formSearchUserId").change(function(){ //code })イベントハンドラにコードをラップする必要があります。それはあなたの入力の変化を監視し、変更が発生するたびに渡される関数をトリガします。 keyupと

$(document).ready(function(){ 
 
    $("#formSearchUserId").change(function() { 
 
    console.log($("#formSearchUserId").val()) 
 
    if ($("#formSearchUserId").val() == "") { 
 
    $('#userIdBtn').prop('disabled', true); 
 
    } else { 
 
    $('#userIdBtn').prop('disabled', false); 
 
    } 
 
}).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id=formSearchUserId name=formSearchUserId /> 
 
<button id=userIdBtn>Search</button>

Answer 2

：

$(document).ready(function(){ 
 
    if ($("#formSearchUserId").val() == "") { 
 
    $('#userIdBtn').prop('disabled', true); 
 
    } 
 
    $("#formSearchUserId").keyup(function() { 
 
    console.log($("#formSearchUserId").val()) 
 
    if ($("#formSearchUserId").val() == "") { 
 
    $('#userIdBtn').prop('disabled', true); 
 
    } else { 
 
    $('#userIdBtn').prop('disabled', false); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id=formSearchUserId name=formSearchUserId /> 
 
<button id=userIdBtn>Search</button>

Answer 3

また.keyupに見ることができます。 valueの空室状況を確認してください。空白がある場合を避けるために.trimを追加することができます。

$("#formSearchUserId").on("keyup", function(){ 
 
    $('#userIdBtn').prop('disabled', !this.value.trim().length>0) 
 
}) 
 

 
$(function(){ 
 
    $("#formSearchUserId").trigger("keyup"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type="text" id="formSearchUserId"/> 
 
<button id="userIdBtn">Id Btn</button>