jQuery - 送信ボタンを有効/無効にするにはどうすればいいですか?

jQuery を使用してボタンを有効または無効にすると、ユーザーの操作に応じていくつかの利点があります。このコードは、他の jQuery 実装でも簡単に使用できます。さっそく始めましょう.

せっかちな方は、jQuery 1.6以下のバージョンと互換性のあるprop()関数を使用できます:

$('.button').prop('disabled', true);無効にするには
$('.button').prop('disabled', false);有効にするにはボタンを無効にしたりアクティブにしたりするための他の機能の詳細を知りたい人は、 on.

Web開発では、最も一般的な問題は送信ボタンを2回クリックすることです。ユーザーがボタンがクリックされたことを確認するために何度かクリックすることがありますが、これは二重の検証を引き起こします。

特に jQuery と Ajax を使用して HTML フォームを作成した場合は、ページの読み込み中にボタンをクリックして送信ボタンを無効にする必要があります。 ユーザーが同じボタンを 2 回クリックするとエラーが発生する可能性があるため、望ましくないためです。したがって、これを防ぐには、送信ボタンを無効にする必要があります。

解決策は、ユーザーが送信ボタンをクリックした後に送信ボタンを無効にし、処理が進行中であることをユーザーに示す読み込みまたはメッセージを表示することです。
送信ボタンを無効にする
jQuery で送信ボタンを無効にするには、 ボタン属性を無効にする必要があります Submit.

$('input:submit').click(function(){
 $('input:submit').attr("disabled", true); 
});
送信ボタンを有効にする
送信を無効にするボタンを有効にするには、"disabled" 属性の値を false に変更するか、"disabled" 属性を削除します。

$('input:submit').attr("無効", false);
or
('input:submit').removeAttr("無効");
attr() 関数と removeAttr() 関数は、バージョン 1.6.
Example 
入力とボタンを含む単純なHTMLフォームを作成します。このフォームはお問い合わせフォームであり、ユーザーは名前、姓、メールアドレス、メッセージを指定する必要があります。このアイデアは、ユーザーが「送信」ボタンを 2 回クリックしないようにすることです。


<ヘッド>
 
<スクリプト src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">

<スタイル>
input,textarea{
 margin-bottom:10px;
}



<ボディ>

名前: 
<入力ID ="名前" 名前="名前" タイプ="テキスト" />
名: 
<入力ID = "名" 名前 = "名" タイプ = "テキスト" />
メール: 
<入力ID = "メール" 名前 = "メール" タイプ = "テキスト" />
メッセージ: 
<br /><br /><入力id = "btn_envoyer" type = "submit" value = "送信" /><br /></form><br /><スクリプト><br /> $(function() <br /> {<br /> $('#btn_envoyer').click(function()<br /> {<br /> $(this).attr("無効", "無効");<br /> });<br /> });<br /></script><br /></body><br /><br /></html><br /></pre>このコードをWebブラウザでテストすると、次の結果が得られます:<br /><br /><div class="separator" style="clear: both;text-align: center;"><a href="http://2.bp.blogspot.com/-Ai1hsbLm0Mg/Vp54iPQCZsI/AAAAAAAABFI/aK9q6AeJKbQ/s1600/submit%2Bbutton.png" imageanchor="1" style="margin-left: 1em;マージン右:1em;"><img alt="送信ボタンの有効化と無効化" border="0" height="287" src="https://2.bp.blogspot.com/-Ai1hsbLm0Mg/Vp54iPQCZsI/AAAAAAAABFI/aK9q6AeJKbQ/s400/submit%2Bbutton.png" title="送信ボタンの有効化と無効化" width="400" /></a></div>クリック後、"送信" ボタンが無効になりました。<br /><br />参照:<br /><a href="https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/" target="_blank">フォーム要素を無効/有効にするにはどうすればいいですか?</a><br /><a href="http://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button" target="_blank">jQuery 送信ボタン</a></div></div>
                    </div>

                </div>


            </main>

        </div>
        <footer class="col-md-12" style="    position: relative;">
    <div class="footer-bottom">
        <div class="container">
                        <p class="pull-center" style='text-align:center;margin: 1px 1px 8px 0px;'>© codeurjava.com 2015 - 2025 | <a href="https://www.codeurjava.com/privacy-policy.php">Privacy policy</a></p>
        </div>
    </div>
</footer>    </div>


    <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZDLC4L1BHK"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'G-ZDLC4L1BHK');
    </script>

    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
    <style>
        
      /* Pretty printing styles. Used with prettify.js. */
      .str { color: #2a00ff; }
      .kwd { color: #7f0055;font-weight: bold; }
      .com { color: #3f7f5f; }
      .typ { color: #606; }
      .lit { color: #066; }
      .pun { color: #660; }
      .pln { color: #000; }
      .tag { color: #008; }
      .atn { color: #606; }
      .atv { color: #080; }
      .dec { color: #606; }
      pre.prettyprint { padding: 5px; border: 1px solid #888; }
      @media print {
        .str { color: #2a00ff; }
        .kwd { color: #7f0055; font-weight: bold; }
        .com { color: #3f7f5f; }
        .typ { color: #404; font-weight: bold; }
        .lit { color: #044; }
        .pun { color: #440; }
        .pln { color: #000; }
        .tag { color: #006; font-weight: bold; }
        .atn { color: #404; }
        .atv { color: #060; }
      }
      @media screen {
        .str { color: #2a00ff; }
        .kwd { color: #7f0055; font-weight: bold; }
        .com { color: #3f7f5f; }
        .typ { color: #000; }
        .lit { color: #044; }
        .pun { color: #440; }
        .pln { color: #000; }
        .tag { color: #006; font-weight: bold; }
        .atn { color: #404; }
        .atv { color: #060; }
      }    </style>

    <script type="text/javascript">
        addEventListener('load', function(event) {
            PR.prettyPrint();
        }, false);
    </script>
</body>

</html>