启用/禁用按钮 - 验证用户名是否存在答案

【问题标题】：Enable/Disable button - Verify username existence启用/禁用按钮 - 验证用户名是否存在
【发布时间】：2016-05-09 13:29:15
【问题描述】：

我正在尝试验证数据库中是否存在用户名。

我有一个包含文本字段和提交按钮的字段。提交按钮被禁用。

一旦用户输入了有效的用户名并在数据库中签入后，提交按钮就会启用，文本字段的边框会变为绿色，否则变为红色。

这里一切都很好，但是当用户改变主意并尝试更改用户名时，尽管文本字段指示用户名或格式错误，但提交按钮仍处于启用状态。

如何将提交按钮更改为禁用。

我在我的代码中尝试了这个document.getElementById('register').disabled = false;

这是完整的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function()
{
    $('#username').keyup(username_check);
}); 
function username_check()
{   
var username = $('#username').val();
if(username == "" || username.length < 14)
{
    $('#username').css('border', '2px #CCC solid');
    $('#tick').hide();
}
else
{
jQuery.ajax({
   type: "POST",
   url: "check.php",
   data: 'username='+ username,
   cache: false,
   success: function(response){
    if(response == 1){
        $('#username').css('border', '2px #C33 solid'); 
        $('#tick').hide();
        $('#cross').fadeIn();
        document.getElementById('register').disabled = true;
    }
    else
    {
        $('#username').css('border', '2px #090 solid');
        $('#cross').hide();
        $('#tick').fadeIn();
        document.getElementById('register').disabled = false;
     }

}
});
}
}
</script>
<style>
#username
{
    padding:3px;
    font-size:18px;
    border:3px #CCC solid;
}
#tick{display:none}
#cross{display:none}
</style>
</head>

<body>
<form action="" method="get" style="width:500px">
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="152">&nbsp;</td>
    <td width="348">&nbsp;</td>
  </tr>
  <tr>
    <td>Username</td>
    <td><input name="username" id="username" type="text" />
          <img id="tick" src="tick.png" width="16" height="16"/>
          <img id="cross" src="cross.png" width="16" height="16"/>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="register" id="register" value="Submit" disabled="disabled" /></td>
  </tr>
</table>
</form> 
</body>
</html>

【问题讨论】：

标签： ajax button

【解决方案1】：

$("#register").attr("disabled","disabled") 成功，$("#register").removeAttr("disabled") 失败...

希望对你有帮助

【讨论】：

【解决方案2】：

从 jQuery.ajax 调用的成功函数中删除 document.getElementById('register').disabled = true;。

并将keyup事件修改为：

$('#username').keyup(function()
{
document.getElementById('register').disabled = true;
username_check();
});

【讨论】：

【解决方案3】：

document.getElementById('register').disabled = true;

会有用的

【讨论】：