如何在任何提交时禁用 html 中的所有提交类型答案

【问题标题】：how to disable all submit type in a html on any submit如何在任何提交时禁用 html 中的所有提交类型
【发布时间】：2018-03-29 15:41:54
【问题描述】：

我的应用程序中有很多 HTML 页面，我们遇到了不耐烦的用户多次提交相同输入的问题，我想使用 JavaScript 或 JQuery 禁用所有 type=Submit 字段或至少禁用提交的字段。我试图避免 HTML 更改并仅使用脚本来处理。

【问题讨论】：

你试过什么？你不明白什么？你问如何找到按钮？如何禁用东西？
所以选择按钮......
e.preventDefault();
我没有将它们作为按钮，它们是带有值的提交类型的输入

标签： javascript jquery html spring-webflow

【解决方案1】：

您可以在提交表单时添加禁用属性，或者在单击按钮时...

$('form').on('submit', function () {
    $('button', this).attr('disabled', 'disabled');
});

您需要扩展此示例以处理验证失败或 AJAX 请求（即重新启用按钮）。

或者，如果您有提交类型的输入...

$('form').on('submit', function () {
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

【讨论】：

【解决方案2】：

我最近开始添加一个加载图标，该图标会弹出以向用户显示正在处理的内容。此加载图标将位于占据整个页面（绝对位置）的容器内，并且不透明度为 0.5。这将使背景中的所有内容变灰，并阻止用户单击任何其他按钮。

这是 HTML

<div class="loader-container" >
   <div class="loader"></div>
</div>

还有 CSS

.loader {
            border: 10px solid #f3f3f3; 
            border-top: 10px solid #3498db;
            border-radius: 50%;
            width: 75px;
            height: 75px;
            animation: spin 2s linear infinite;
        }
        .loader-container{
            background: rgba(0,0,0,0.35);
            position: fixed;
            z-index: 5;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

当用户单击提交时，您显然必须切换加载器容器的可见性。

【讨论】：