单击后禁用表单按钮 [英] disable form button after click

问题描述

我想在点击后禁用表单提交按钮，以防止多次提交表单。我使用以下代码禁用该按钮并添加一个使其显示为禁用的类：

I want to disable a form submit button after it's clicked to prevent the form being submitted multiple times. I use the following code to disable the button and add a class that makes it appear disabled:

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');
    return true;
});

它在IE和Firefox中运行良好，但在Chrome 17中，表单无法提交。我想我可以用以下代码替换上面的代码：

It works fine in IE and Firefox, but in Chrome 17 the form doesn't get submitted. I guess I could replace the code above with:

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');

    var form = // how can I get a reference to the form from the button 'this' ?
    form.submit();
    return false;
});

但是你可以看到我不知道如何从里面获取对表格的引用点击处理程序。

But as you can see I'm not sure how to get a reference to the form from inside the click handler.

推荐答案

你的代码没有意义！首先禁用默认提交，然后手动提交。

Your code doesn't make sense! First you disable the default submit and then submit manually.

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');

    var form = this.form;
    form.submit(); // submits the form
    return false;  // disable the defualt submit.... ?!
});

请勿取消自动提交，就是这样！

Don't cancel the automatic submit and that's it!

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');
});

我会这样写：

$("form").submit(function() {
    $('button.primaryAction').prop("disabled", true).addClass('disabledBtn');
});

这篇关于单击后禁用表单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！