Javascript启用/禁用按钮无法正常工作

Question

这是我的登录视图：

@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. 当他们单击提交时，该按钮被禁用，因此他们不能单击两次。

我也没有运气。

我进行了以下建议的更改，但是一旦我在字段中输入了内容，该按钮仍未启用

**进一步测试**

我像这样建议添加了alert（）：

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运行时错误：“ enableLogonButtonX”未定义

因此，我相信它正在看到JScript。

然后我添加了这个：

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

并更改此：

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

我的“成功”奏效了。 因此，我相信onclick也能正常工作。

Answer 1

disabled是布尔型属性，而不是属性。

设置：

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

清除：

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

Answer 2

除非我没有足够仔细地阅读您的问题（顺便说一句，因为可能是5点之后……喝啤酒的时间），或者您的问题有错别字，否则我认为您的错误消息会为您提供一切需要调试这个。

这是您的消息： Microsoft JScript runtime error: 'enableLogonButtonX' is undefined

这是您的函数名称： enableLogonButton

因此，根据错误消息，您正在调用函数enableLogonButtonX()但您的函数名为enableLogonButton 。 更改为此：

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

Answer 3

无需更改disable属性的值即可将其从元素中完全删除。

即替换此

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

用

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