Javascript 启用/禁用按钮未按预期工作

Question

这是我的登录 View :

@model SuburbanCustPortal.Models.LogOnModel

@{
    ViewBag.Title = "Log On";
}

<h2>Log On</h2>
<p>
  Please enter your user name and password. @Html.ActionLink("Register", "Register") if you don't have an account.
</p>

<p>
  If only you wish to make a payment on your account and do not want to create a website login, @Html.ActionLink("click here", "RedirectToPaymentPage", "Account").
</p>


@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

@using (Html.BeginForm()) {
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field focus">
                @Html.TextBoxFor(m => m.UserName, new { @class = "GenericTextBox", onkeyup = "enableLogonButton()" })
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password, new { @class = "GenericPasswordBox", onkeyup = "enableLogonButton()" })
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

          <p>
            <button name="btn" value="Log On" onclick="disableButton()" disabled="disabled">Log On</button>
          </p>

          <p>
            If you need to retrieve your username @Html.ActionLink("click here.", "ForgotUsername", "Account")<br/>
            If you need to reset your password @Html.ActionLink("click here.", "ForgotPassword", "Account")
          </p>

        </fieldset>
    </div>
}

这是我的 widget.js:

function enableLogonButton() {
  if ($('#UserName').val() == "") {
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  if ($('#Password').val() == "") {
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  $('#btn').removeAttr('disabled');
}

    function logonDisableSubmitButtons(clickedButton) {

        $("input[type='button']").each(function() {
          if (this.name != clickedButton)
            $(this).attr("disabled", "disabled");
          else {
            //hiding the actually clicked button
            $(this).hide();
            //Creating dummy button to same like clicked button
            $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" class="' + $(this).attr('class') + '" />');
          }
        });

      }

      function disableButton() {

        $('#btn').click(function (e) {
          $(this).attr('disabled', 'disabled');
        });


      }

无论我做什么，我都没有启用该按钮。

我想要的是两件事:

1. 当用户的登录名和用户名中有某些内容时，启用提交按钮。
2. 当他们点击“提交”时，该按钮会被禁用，因此他们无法点击两次。

我两者都没有运气。

我已进行了下面建议的更改，但在字段中输入内容后该按钮仍未启用

** 进一步测试**

我按照建议添加了alerts():

function enableLogonButton() {
  alert("start");
  if ($('#UserName').val() == "") {
    alert("username");
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  if ($('#Password').val() == "") {
    alert("password");
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  alert("enabled");
  $('#btn').removeAttr('disabled');
}

他们都没有开火。至少，我没有收到任何提示。

因此，我更改了对此的调用，以确保它甚至可以看到 JScript:

@Html.PasswordFor(m => m.Password, new { @class = "GenericPasswordBox", onkeyup = "enableLogonButtonX()" })

我收到这条消息:

Microsoft JScript runtime error: 'enableLogonButtonX' is undefined

所以，我相信它正在看到 JScript。

然后我添加了这个:

<script>
    function myFunction() {
      alert("hit!");
    }
</script>

并改变了这一点:

 <button name="btn" value="Log On" onclick="myFunction()" disabled="disabled">Log On</button>

我的“成功”成功了。所以，我相信 onclick 也能工作。

Answer 1

disabled 是一个 bool 属性，而不是一个属性。

设置:

$('#btn').attr('disabled', 'disabled');

清除:

$('#btn').removeAttr('disabled')