Question

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

@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事件，不按钮上的click事件。这样，当使用空格键或Enter键提交表单时，您将采取您的操作。处理click事件将错过这些键盘交互。

这也是表单未提交的原因。如您所知，点击已停用的submit按钮不会提交表单。但是您在click事件期间禁用了该按钮，该事件会在<{em> 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;
    }
}
});

确认提示后禁用提交按钮

4 个答案: