Question

我写了这段代码，点击后禁用我网站上的提交按钮：

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

不幸的是，它没有发送表格。我该如何解决这个问题？

修改我想绑定提交，而不是形式：）

Answer 1

执行onSubmit()：

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

发生的事情是你在实际触发提交事件之前完全禁用该按钮。

您可能还应考虑使用ID或CLASS来命名元素，因此不要在页面上选择提交类型的所有输入。

演示： http://jsfiddle.net/userdude/2hgnZ/

（注意，我使用的是preventDefault()和return false，因此表单在示例中并未实际提交;请在使用时将其保留。）

Answer 2

特别是如果有人在Chrome中遇到问题：

要解决此问题，您需要使用onSubmit元素中的<form>标记来设置提交按钮disabled。这将允许Chrome在按下后立即禁用该按钮，表单提交仍将继续...

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

Answer 3

已禁用的控件不提交其值，这无助于了解用户是否单击了保存或删除。

所以我将按钮值存储在一个隐藏的内容中。隐藏的名称与按钮名称相同。我将所有按钮调用button。

E.g。 <button type="submit" name="button" value="save">Save</button>

基于此，我找到了here。只需将单击的按钮存储在变量中即可。

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

这是我的IsNull功能。使用或替换您自己的版本IsNull或undefined等。

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}

Answer 4

这应该在你的应用中处理它。

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

Answer 5

简单有效的解决方案

float

来源：here

Answer 6

更简单的方法。我已经尝试过了，它对我来说很好用：

$(':input[type=submit]').prop('disabled', true);

Answer 7

您的代码实际上适用于FF，但它无法在Chrome上运行。

适用于FF和Chrome。

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>

Answer 8

如何停用提交按钮

只需在onclick事件上调用一个函数，然后...返回true提交，返回false以禁用提交。 或在window.onload上调用一个函数，如：

window.onload = init();

并在init（）中执行以下操作：

var theForm = document.getElementById(‘theForm’); theForm.onsubmit = // what ever you want to do

Answer 9

以下对我有用：

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

如果用户尝试多次提交表单（通过单击提交按钮，按Enter键等），则取消提交事件。

Answer 10

我一直在使用blockUI来避免禁用或隐藏按钮上的浏览器不兼容。

http://malsup.com/jquery/block/#element

然后我的按钮有一个类autobutton：

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });

然后表格就是这样：

<form>
....
<button class="autobutton">Submit</button>   
</form>

Answer 11

按钮代码

<script>
export default {

    name: "field",

    inject: {
        $validator: '$validator'
    },

}
<script>

禁用按钮

<button id="submit" name="submit" type="submit" value="Submit">Submit</button>

注意：您的案例可能是多次，这次可能需要更多条件

Answer 12

是否也要提交按钮的值并防止重复提交表单？

如果您使用的是类型为“提交”的按钮，并且还希望提交按钮的值（如果禁用了该按钮，则不会发生），则可以设置表单数据属性，然后进行测试。

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });

Answer 13

简单方法：

Javascript 和 HTML：

$('form#id').submit(function(e){
    $(this).children('input[type=submit]').attr('disabled', 'disabled');
    // this is just for demonstration
    e.preventDefault(); 
    return false;
});

<!-- begin snippet: js hide: false console: true babel: false -->

<form id="id">
    <input type="submit"/>
</form>

注意：在 chrome 和 edge 上完美运行。

Answer 14

最简单的纯 javascript 解决方案是简单地禁用按钮：

<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
  <button id="blahButton">Submit</button>
</form>

document.getElementById('blahButton').disabled = true ;

它适用于/没有 onSubmit。表单保持可见，但无法添加任何内容。

Answer 15

如前所述，如果在提交按钮上添加disabled属性，则不会发送数据。

@Valamas的诀窍有效，但我找到了一个非常容易实现的解决方案：

$('#yourform').submit(function(){
    $('#mySubmitButton').addClass('disabled');
});

你可以在CSS中定义禁用的类：

.disabled{
    cursor:not-allowed;
}

这与disabled =“disabled”相同，但不会对发送的数据产生影响。

禁用表单提交上的提交按钮

15 个答案:

是否也要提交按钮的值并防止重复提交表单？