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

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 查找。如果您不输入“#”，它将按元素名称查找（即“input”、“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>