1. ホーム
  2. javascript

[解決済み] jQueryの送信ボタンの無効化・有効化

2022-03-05 16:18:32

質問

このようなHTMLがあります。

<input type="text" name="textField" />
<input type="submit" value="send" />

どうしたらこんなことができるのでしょうか。

  • テキストフィールドが空の場合、サブミットを無効化する必要があります。
  • テキストフィールドに何か入力されると、disabled属性が解除されます。
  • テキストフィールドが再び空になった場合(テキストが削除された場合)、送信ボタンは再び無効になるはずです。

こんな感じでやってみました。

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

...が、うまくいきません。何かアイデアはありますか?

解決方法は?

問題は、入力からフォーカスが外れたとき (たとえば、誰かが入力からクリックしたり、タブで移動したりしたとき) にのみ change イベントが発生することです。 代わりに keyup を使ってみてください。

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });