确认提示后禁用提交按钮

Question

我的 ASP.Net MVC 5 Razor 视图中有一个按钮

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "myForm" }))
{
    <button type="submit" class="btn btn_d fl sepV_a" id="btnNotify" name="btnNotify"><span>Notify</span></button>   
}

当它被点击时我调用一个 JQuery 函数询问用户他们是否仍然希望继续提交

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnNotify").click(ConfirmNotify);
        function ConfirmNotify() {
            if (confirm('Are you sure you wish to continue?')) {
                $("#btnNotify").attr('disabled', 'disabled');
                return true;
            } else {
                return false;
            }
        }
    });
</script>

如果用户单击“确定”以确认“提交”，那么我想禁用“通知”按钮。

不幸的是，当用户在提示中单击“确定”时，上面的代码禁用了“通知”按钮，但是，提交表单不会出现。

如果我将 $("#btnNotify").attr('disabled', 'disabled'); 和 return true; 行换成这个

function ConfirmNotify() {
    if (confirm('Are you sure you wish to continue?')) {
        return true;
        $("#btnNotify").attr('disabled', 'disabled');
    } else {
        return false;
    }
}

当用户单击“确定”时表单已提交，但“通知”按钮未被禁用，即用户随后可以多次单击“通知”按钮。

有谁知道如何纠正这个问题？非常感谢任何建议。

谢谢。

Answer 1

如this answer所述，使用$("#btnNotify").prop('disabled', true);更改禁用属性。

Answer 2

我找到了我认为是我自己的问题的答案，虽然下面的代码有效，但它不是最佳答案。这是由 Michael Geary 友情提供的。请查看已接受的答案。

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnNotify").click(ConfirmNotify);
        function ConfirmNotify() {
            if (confirm('All available locums will be contacted via text and email. Are you sure you wish to continue?')) {
                $("#btnNotify").attr('disabled', 'disabled');
                $('#myForm').submit();
            } else {
                return false;
            }
        }
    });
</script>

第 $('#myForm').submit(); 行是所需要的。

Answer 3

如果您想在提交表单时采取行动 - 即使是像这样的单按钮表单 - 您应该处理表单本身的 submit 事件，不是按钮上的 click 事件。这样，当使用空格键或 Enter 键提交表单时，您的操作将被执行。处理 click 事件将错过这些键盘交互。

这也是表单没有提交的原因。如您所知，单击禁用的 submit 按钮将不会提交表单。但是您在 click 事件期间禁用了按钮，该按钮在事件之前触发 submit 事件。因此，当浏览器准备好通过单击提交表单时，它会看到提交按钮被禁用并决定不提交表单。

一个小问题，我建议使用 event.preventDefault() 而不是 return false 来阻止表单提交。任何一个都可以工作，但 .preventDefault() 使您的意图更加清晰，并且它还允许任何其他事件处理程序运行。 return false 相当于同时调用 .preventDefault() 和 .stopPropagation().

只要我们在做，让我们找点乐子，把这段代码做成一个 jQuery 插件：

jQuery.fn.confirmSubmit = function( message ) { $(this).submit( function( event ) { if( confirm(message) ) { $(this).find('button[type="submit"]').prop( 'disabled', true ); } else { event.preventDefault(); } }); };

现在您可以在任何表单上使用它，因此您的示例代码为：

$('#myForm').confirmSubmit( 'Are you sure you wish to continue?' );

如果您使用的是非常旧的 jQuery 版本，则需要像您的示例一样坚持使用 .attr('disabled','disabled')，但是对于任何较新的版本，最好使用 [=25] =].

另外两个注意事项：

普通的JavaScript函数名应该以小写字母开头，而不是大写字母。只有构造函数应该以大写字母开头。

请注意 confirm() 不是 jQuery 函数。它是浏览器提供的JavaScript功能。

Answer 4

从 Michael Geary 提供的解决方案开始，这里是一个包含自定义确认消息作为按钮属性的解决方案：

<button class='once-only' confirm='Please confirm you wish to proceed' type="submit"> GO </button>

$(document).ready(function () {
    $(".once-only").click(ConfirmNotify);
    function ConfirmNotify() {
        if (confirm($(this).attr('confirm'))) {
           this.form.submit();
           this.disabled = true;
           return true;
       } else {
        return false;
    }
}
});

确认提示后禁用提交按钮

Disable Submit Button After Confirm Prompt

jquery

form-submit

disabled-input