jQuery - 如何启用/禁用提交按钮？

使用 jQuery 启用或禁用按钮有几个优点，具体取决于用户的交互。您可以轻松地将此代码与其他 jQuery 实现一起使用。让我们开始吧.

对于不耐烦的人，您可以使用与以下版本兼容的 prop（）函数 jQuery 1.6：

$（'.button'）.prop（'disabled'， true）;disable
$（'.button'）.prop（'disabled'， false）;要启用

其他想要了解更多信息并查看其他功能以禁用和激活按钮的人，我邀请您继续阅读.

在 Web 开发中，最常见的问题是单击两次提交按钮。有时用户单击几次以确保按钮已单击，但这会导致双重验证。

如果您创建了一个 HTML 表单，尤其是使用 jQuery 和 Ajax，则需要在单击该按钮时在页面加载时禁用该按钮。因为您不希望用户再次单击相同的按钮，因为这可能会导致错误。因此，为了防止这种情况发生，我们需要禁用提交按钮。

解决方案是在用户单击提交按钮后禁用它，并显示加载或消息以向用户显示处理正在进行中。

禁用提交按钮

要使用 jQuery 禁用提交按钮，您需要禁用按钮属性 Submit.

$（'input：submit'）.click（function（）{
 $（'input：submit'）.attr（disabled”， true）; 
}）;

启用提交按钮

要启用禁用提交按钮，请将disabled”属性的值更改为 false，或删除disabled”属性。

$（'input：submit'）.attr（disabled”， 假的）;
or
（'input：submit'）.removeAttr（禁用”）;

attr（）和 removeAttr（）函数的作用与 prop（）函数相同，只是它们从 1.6.

Example 版本开始集成到 jQuery 中

我们将创建一个简单的 HTML 表单，其中包含输入和按钮。此表单是联系表单，用户必须指定其姓名、电子邮件地址和消息。这个想法是不允许用户单击两次发送”按钮。


<头>
 
<脚本 src=https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”>

<风格>
input，textarea{
 margin-bottom：10px;
}



<身体>
<表单操作=” id=表单” method=POST”>
名称：
<输入 id=name” name=name” type=text” />
名字：
<输入 id=firstname” name=firstname” type=text” />
电子邮件： 
<输入 id=email” name=email” type=text” />
消息：
<br /><br /><输入 id=btn_envoyer” type=submit” value=发送” /><br /></form><br /><脚本><br /> $（function（） <br /> {<br /> $（'#btn_envoyer'）.click（function（）<br /> {<br /> $（this）.attr（disabled”， disabled”）;<br /> }）;<br /> }）;<br /></脚本><br /></body><br /><br /></html><br /></pre>如果我们在 Web 浏览器上测试此代码，它会给出以下结果：<br /><br /><div class=separator” style=clear： both;text-align：居中;”><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 disable/enable submit button</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>