Question

您好我正在尝试在点击后禁用提交按钮。我也使用jQuery Form插件，所以我的代码看起来像：

$('#passwordForm').ajaxForm({
            dataType:  'json',
            beforeSubmit:  disableButton,
            success:   processPassword
        });

我的disableButton函数是：

function disableButton(formData, jqForm, options) {
    jqForm[0].children('input[type=submit]').attr('disabled', 'disabled');
}

但现在看起来我的整个表单已被禁用，并且没有任何内容发送到服务器！这样做有用吗？如果我在beforeSubmit函数中禁用了提交按钮（但表单已经提交），我的整个表单将被禁用？如何解决这个问题？

由于的Dawid

Answer 1

您说表单已提交，但您在beforeSubmit中禁用了提交按钮。正如之前提交的名称所示，这是在实际提交表单之前触发的。如果没有启用提交按钮，则无法提交表单。

在此处详细了解已停用的表单元素：http://www.w3.org/TR/html4/interact/forms.html#h-17.12。长话短说：“禁用控件无法成功。”

Answer 2

第一个问题是您正在索引jqForm参数，该参数返回表单的DOM元素。这没有children（）函数。

jqForm是一个jQuery对象，因此您只需调用jqForm.children()即可。但是，我建议改为调用jqForm.find()，因为孩子们只搜索直接的孩子，而不是所有孩子。

在提交时禁用字段是一个棘手的问题。通常我要做的就是附加一个do-nothing事件处理程序。

这样的事情：

$('#passwordForm').ajaxForm({
    dataType:  'json',
    beforeSubmit:  disableButton,
    success:   processPassword
});

function disableButton(data, $form, opts) {
    $form.find('input:submit').val("Please wait...").click(function(e){
        e.preventDefault();
        return false;
    });
}

因此用户可以点击它，但不会发生任何事情：）

Answer 3

您的表单元素是否已启用？为了确保它，请尝试：

function disableButton(formData, jqForm, options) {
    jqForm[0].find(':input').attr('disabled', false);
    jqForm[0].find('input[type=submit]').attr('disabled', true);
}

希望这会有所帮助。干杯

Answer 4

试试这个

function disableButton(formData, jqForm, options) {
    jqForm[0].children('input[type="submit"]').attr('disabled', 'disabled');
}

使用jQuery Form Plugin禁用提交按钮

4 个答案: