Question

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

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

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

$("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;
});

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

Answer 1

this.form会为您提供参考。

所有表单元素（按钮，输入，选择等）都有一个表单属性，指向它们所属的表单元素。

Answer 2

您可以通过使用jquery的submit（）函数而不是click（）函数来绕过此问题。包含的函数只会在发生提交操作后触发。

Answer 3

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

$("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.... ?!
});

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

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

我会这样写：

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

单击后禁用表单按钮

3 个答案: