Javascript 如何根据if语句更改按钮的颜色？

我目前正在一个需要用户注册的网站上工作。在注册表窗体上，我有4个文本字段和一个注册表按钮。我有一个用户名字段、电子邮件字段、密码字段和确认密码字段。每当用户输入信息时，都会执行多个测试。例如，有用户名可用性检查器、电子邮件验证程序、密码匹配检查器和密码强度检查器。为了让用户能够注册，我希望所有这些测试都能通过。如果这些测试中至少有一个失败，例如用户的密码不匹配，我不希望注册按钮可点击，我还希望注册按钮在不可点击时变灰。以下是我的尝试：

首先，我设置了4个变量。每个变量代表一个经过的测试

var test1 = 0;
var test2 = 0;
var test3 = 0;
var test4 = 0;

默认情况下，所有测试都设置为“0”，表示测试失败。因此，默认情况下，“注册”按钮应不可点击并呈灰色

然后，我自己编辑了测试。如果测试通过，我会将相应的测试变量设置为“1”。例如，下面是我的用户名测试：

if(msg == 'OK') //if the username is available
{ 

    $("#username").removeClass("red");
    $("#username").addClass("green");
    msgbox.html('<img src="available.png" align="absmiddle">');
    test1 = 1; //sets the first test variable as passed
}  
else  //if the username is not available
{  
     $("#username").removeClass("green");
     $("#username").addClass("red");
    msgbox.html(msg);
    test1 = 0; //sets the first test variable as failed
}

之后，每次按下任何字段中的键时，我都会调用该函数。我通过使用“onkeyup”属性来实现这一点

<input type="text" name="username" onkeypress="return inputLimiter(event,'username'); checkButton()" id="username" maxlength="20" placeholder="Enter your desired username"/><br>
<input type="text" name="email" id="email" onkeyup="checkButton()" placeholder="Enter your E-Mail address here"/><br>
<input type="password" class="password" id="password" name="password" onkeyup="checkStrength(); checkPasswordMatch(); checkButton()" placeholder="Enter a password with more than 5 characters"/><br>
<input type="password" id="password2" onkeyup="checkPasswordMatch(); checkButton()" name="password2" placeholder="Enter the same password you entered above"/><br>

---

如果查看我的注册表单会有所帮助，请访问此处：

如果您的问题是如何禁用提交按钮？，此代码将对您有所帮助

此代码用于禁用“提交”按钮：

document.getElementById("register").setAttribute("disabled", "true");

为了使它能够：

document.getElementById("register").removeAttribute("disabled");

使用setAttributedisabled，false将不会启用提交按钮更多信息：

希望这有帮助

document.getElementById("register").removeAttribute("disabled");