Question

我在我的视图中有这个代码

<h2>@ViewBag.FileContent</h2>
@using (Html.BeginForm("ShowWebSiteLinks", "Home"))
{            
        <label>WebSite URL:</label>            
        <input type="text" id="ft" name="fturl" value="http://localhost/search/?sr=100" style="width:350px"><br>

        <label>Save to file:</label>            
        <input type="text" id="filename" name="links_filename" value="links.txt"  style="width:200px"><br>
        <input id="btnSubmit" type="submit" value="Start" />                           
}

点击提交按钮后，控制器调用功能正常，但提交按钮保持启用状态。我想阻止多次点击按钮，并希望禁用它，但不知道如何。我试过这个javascript但它不起作用。

$(document).ready(function () {
    $('btnSubmit').click(function (e) {
        $(this).attr('disabled', true);
    });
});

有人可以帮我这个吗？

Answer 1

您的javascript几乎正确，但选择器错误。试试这个：

$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('disabled', true);
    });
});

注意选择器中的“＃”。这告诉jQuery按元素ID查找。如果你没有输入“＃”，它将按元素名称找到（即“输入”，“div”等...）

编辑：

这是关于选择器的好的备忘单：http://refcardz.dzone.com/refcardz/jquery-selectors

编辑2：

更新以使用“$（this）.prop（...）”而不是“$（this）.attr（...）”

编辑3：

我建议您将javascript代码放在页面的末尾（而不是头部）。像这样：

<html>
    <head>[...]</head>
    <body>
        [...]
        <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function (e) {
                $(this).prop('disabled', true);
            });
        });
        </script>
    </body>
 </html>

Answer 2

上述答案对我不起作用。我注意到如果你绑定到click事件并立即禁用，你实际上会阻止表单提交。

相反，我会做以下事情：

<script type="text/javascript">
$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('hidden', true);
    });
    $('#myform').bind('invalid-form.validate', function () {
        $('#btnSubmit').prop('hidden', false);
    });
});
</script>

在单击操作时隐藏您的提交按钮但仍允许操作通过。如果验证失败，第二个语句是重新显示按钮。有关详细信息，请访问：ASP.net MVC Validation Hook

如何在表单提交后禁用按钮或更改值

2 个答案: