确认提示后禁用提交按钮

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

如果您想在提交表单时采取行动——即使是像这样的单按钮表单——您应该为表单本身处理submit 事件，不是@987654322 @按钮上的事件。这样，当使用空格键或 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')，但对于任何较新的版本，最好使用 .prop('disabled',true)。

另外两点：

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

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

Answer 2

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

Answer 3

我找到了我认为是我自己问题的答案，虽然下面的代码有效，但它不是最佳答案。这是由 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 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;
    }
}
});