jQueryの無効化/有効化送信ボタン


811

私はこのHTMLを持っています:

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

どうすればこのようなことができます:

  • テキストフィールドが空の場合、送信を無効にする必要があります(disabled = "disabled")。
  • 無効な属性を削除するためにテキストフィールドに何かが入力されたとき。
  • テキストフィールドが再び空になる(テキストが削除される)場合は、送信ボタンを再度無効にする必要があります。

私はこのようなものを試しました:

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

…しかしそれは機能しません。何か案は?


2
このようにremoveAttr( 'disabled')を使用しないでください。状態を切り替えるには、prop()を使用します。私の回答または公式ドキュメントを参照しください。
基本6

回答:


1195

問題は、フォーカスが入力から離れたときにのみ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);
        }
     });
 });

2
わかりましたが、問題は、最後の文字を削除すると、空の値をキャプチャしてボタンを無効にするためにもう一度押す必要があります。バックスペースを押して最後の文字を削除すると、フィールドにまだ値が入力されているため、キーを押しますがキャプチャされ、その後、手紙は削除されます。だから...どうすればいいですか?
kmunky 2009年

1
ああ、コードを最初にテストしていないことをお詫びします。keypressをkeyupに置き換えると役立ちますか?
エリックパラコビッチカー

4
キーボードを使用せずにフィールドの値を変更するとどうなりますか?
ネイサン、

1
これは機能しますが、CSSを除外するようです。たとえば、$( "#loginButton")。button();を呼び出すと、on input id="loginButton" type="submit" name="Submit" value="Login" disabled>は、CSSが無効なクラスを含む無効なボタンを表示します。
Gaʀʀʏ

39
prop( 'disabled'、true)メソッドは、attr( 'disabled'、 'disabled')メソッドよりも使用する必要があります。prop()のドキュメントを参照してください
Martin

129
$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

4
それはうまくいきます!しかし、1つの質問ですが...これについて説明できますか:$( ":text")。keypress(check_submit).each(function(){check_submit();}); ありがとう
kmunky 2009年

1
この問題の問題は、バックスペースまたは削除キーが押されたときにjQueryのkeypressイベントが一貫して発生しないことです。これは、ユーザーがテキストをバックアウトでき、UXの失敗である関数が呼び出されないことを意味します。ほとんどの人が使用している手段として、キーアップを考えています。私はあまり好きではありません。キーダウン時にフィードバックが発生するようにしたいのですが、引き出すのが少し難しいです。
BobRodes 2013

79

この質問は2年前のものですが、それでも良い質問であり、最初のGoogleの結果でした...しかし、既存の回答はすべて、HTML 属性の設定と削除を推奨しています(removeAttr( "disabled"))を正しいアプローチ。属性とプロパティについては、多くの混乱があります。

HTML

<input type="button" disabled>マークアップの「無効」は、W3Cによってブール属性と呼ばれます。

HTMLとDOM

見積もり:

プロパティはDOMにあります。属性はHTML内にあり、DOMに解析されます。

https://stackoverflow.com/a/7572855/664132

jQuery

関連:

それでも、checked属性について覚えておくべき最も重要な概念は、checkedプロパティに対応しないことです。この属性は実際にはdefaultCheckedプロパティに対応しており、チェックボックスの初期値を設定するためにのみ使用する必要があります。checked属性値はチェックボックスの状態によって変化しませんが、checkedプロパティは変化します。したがって、チェックボックスがチェックされているかどうかを判断するためのブラウザ互換の方法は、プロパティを使用することです...

関連:

プロパティは通常、シリアル化されたHTML属性を変更せずに、DOM要素の動的な状態に影響を与えます。例には、入力要素のvalueプロパティ、入力とボタンのdisabledプロパティ、またはチェックボックスのcheckedプロパティが含まれます。.attr()メソッドの代わりに、.prop()メソッドを使用して無効化およびチェックを設定する必要があります。

$( "input" ).prop( "disabled", false );

概要

[...]フォーム要素の[...]無効状態などのDOMプロパティを変更するには、.prop()メソッドを使用します。

http://api.jquery.com/attr/


質問の変更時の無効化について:「入力」と呼ばれるイベントがありますが、ブラウザーのサポートが制限されていますおり、jQueryイベントではないため、jQueryはそれを機能させません。changeイベントは確実に機能しますが、要素がフォーカスを失うと発生します。そのため、2つを組み合わせることができます(一部の人々はキーアップと貼り付けも聞きます)。

これが私が何を意味するかを示すためのテストされていないコードです:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

1
その情報に感謝しますが、属性を使用すると問題が発生するかどうかは実際にはわかりません。属性を使用すると実際に問題が発生しますか?
ChrisJJ 2016年

賛成ですが、@ ChrisJJが述べたように、属性を変更すると問題が発生する特定のケースについても知りたいと思います。
アームフット2017

40

無効な属性の使用を削除するには、

 $("#elementID").removeAttr('disabled');

無効な属性の使用を追加するには、

$("#elementID").prop("disabled", true);

楽しい :)


35

または、小さなことすべてにjQを使用したくない私たちにとっては:

document.getElementById("submitButtonId").disabled = true;

55
それはあなたがJavascriptのベジタリアン、すべてだということは素晴らしいことだが、これは実際に質問に答えていないすべてで
ミシェル

6
25票を獲得するこの回答は、世界中にある多くのくだらないコードを説明しています:/
o0 '。

26

eric、ユーザーがテキストを入力してすべてのテキストを削除すると、あなたのコードは私にはうまくいかないようです。同じ問題が発生した場合は、別のバージョンを作成しました。ここに行く人々:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

14

次のように機能します。

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

HTMLに「無効」属性があることを確認してください


12

ファイル入力フィールドのソリューションは次のとおりです

ファイルが選択されていないときにファイルフィールドの送信ボタンを無効にするには、ユーザーがアップロードするファイルを選択した後で有効にします。

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

HTML:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

11

次のようなものを使用することもできます:

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

ここにライブの例があります


これは私のために働くものです。上記をテストしましたが、いくつか問題がありました。ソヌありがとう!
Geeocode、

10

フォームログインの場合:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

JavaScript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

8

ボタン自体がjQueryスタイルのボタン(.button()付き)の場合は、ボタンの状態を更新して、disabled属性を削除/追加した後に正しいクラスを追加/削除できるようにする必要があります。

$( ".selector" ).button( "refresh" );

3
@The_Black_Smurf将来的に誰かに役立つ場合に備えて追加しました-その害は何ですか?
Tom Chamberlain

ワオ。jQueryの自動更新がここで機能しないと聞いて悲しいです。ありがとう!
ChrisJJ 2016年

7

上記の回答は、メニューベースのカット/ペーストイベントのチェックにも対応していません。以下は、両方を実行するために使用するコードです。変更が発生する前にカットおよび過去のイベントが実際に発生するため、アクションは実際にはタイムアウトで発生することに注意してください。

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

6

バニラJSソリューション。1つの入力だけでなく、フォーム全体で機能します。

問題の選択されたJavaScriptタグ。

HTMLフォーム:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })
<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

いくつかの説明:

このコードでは、htmlフォームにキーアップイベントを追加し、キーを押すたびにすべての入力フィールドをチェックします。少なくとも1つの入力フィールドが空であるか、空白文字のみが含まれている場合は、無効な変数にtrue値を割り当て、送信ボタンを無効にします。

必要なすべての入力フィールドが入力されるまで送信ボタンを無効にする必要がある場合は、以下を置き換えます。

inputs.forEach(function(input, index) {

と:

required_inputs.forEach(function(input, index) {

required_inputsは、必要な入力フィールドのみを含む宣言済みの配列です。


6

if&elseを使用できます。入力が空の場合は、

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

それ以外の場合は、falseをtrueに変更できます


4

無効にする: $('input[type="submit"]').prop('disabled', true);

有効化: $('input[type="submit"]').removeAttr('disabled');

上記の有効化コードは、以下よりも正確です。

$('input[type="submit"]').removeAttr('disabled');

両方の方法を使用できます。


有効にするには、.prop( 'disabled'、false);を使用します。
rahim.nagori

2

これを自分のユースケースに合わせるには、少し作業する必要がありました。

送信する前にすべてのフィールドに値が必要なフォームがあります。

これが私がしたことです:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

ここで答えてくれてありがとう。


2

送信ボタンを有効または無効にするには、以下のコードを参照してください

NameおよびCityフィールドに値がある場合、Submitボタンのみが有効になります。

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>
<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>


うるさくするために、ボタンを有効にする前に(少なくとも)2番目の文字まで待たないでください。;-)
クリスピンク

1

私のプロジェクトからこのスニペットを見てください

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

操作が実行された後、ボタンを無効にしてください

$(this).attr('disabled', 'disabled');


1

各種溶液をご用意しております。だから私は別の解決策を試してみたいと思います。id入力フィールドに属性を追加すると、より簡単になります。

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

今ここにあります jQuery

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

-1

私は以下のコードが誰かを助けることを願っています.. !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.