javascript - 如果对文本框进行了更改，则禁用提交按钮并启用

Question

我有一个文本框和一个提交按钮。我希望在页面加载时按钮变灰（禁用），当用户在文本框中进行更改时，无论是添加文本还是删除文本，该按钮都将被启用，一旦保存，该按钮将再次被禁用。

<h3>Username</h3>
   @Html.TextBoxFor(m=>m.username)

<button class="btn btn-small savebtn" type="submit" value="User Name">Save</button>

现在我遇到的问题是如何将此脚本正确插入到我的视图中。这是我目前的看法：

@model Project.Models.UsernameModel

@using (Html.BeginForm("_UsernamePartial", "Account")) {

   <h3>Username</h3>
   @Html.TextBoxFor(m=>m.Username)

<button class="btn btn-small savebtn" type="submit" value="User name">Save</button>

我是否在标签后的底部添加这样的脚本：

@section scripts {
<script type="text/javascript">
    $(document).ready(function () {
        $(".savebtn").attr('disabled', 'disabled');

        $("#UserName").keyup(function () {
            $(".savebtn").removeAttr('disabled');
        });

        $(".savebtn").click(function () {
            $(this).attr('disabled', 'disabled');
        });
    });
</script>

Answer 1

如果我正确理解您的要求，您需要这样的东西：

$(document).ready(function () {
    //Disable Save Button On Page Load
    $(".savebtn").attr('disabled', 'disabled');

    //When User Name changes, enable Save Button
    $("#UserName").keyup(function() {
        $(".savebtn").removeAttr('disabled');
    });

    //Disable Save Button once clicked
    $(".savebtn").click(function() {
        $(this).attr('disabled', 'disabled');
    });
});

这是一个示例JS Fiddle。