我已经检查了类似问题的大部分答案。我无法让它工作。
是不是因为我使用了Google提供的jquery库？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, world!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
(function(){
$('form > input').keyup(function(){
var empty = false;
$('form > input').each(function(){
if ($(this).val() == ''){
empty = true;
}
});
if (empty){
$('#submitForm').prop('disabled','disabled');
} else {
$('#submitForm').prop('disabled',false);
}
});
})()
</script>
</head>
<body>
<form method="POST">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
<input type="submit" id="submitForm" name="Log In" disabled="disabled">
</form>
</body>
</html>
最佳答案
我还有一个想法…… 让我们像下面这样使用更改事件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, world!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
empty = true;
$("form input").change(function(){
$("form input").each(function(){
if ($(this).val().trim() == ''){
empty = true;
return false;
}
empty = false;
})
if (!empty){
$("#submitForm").removeAttr('disabled')
}
else{
$("#submitForm").attr('disabled','disabled')
}
})
})
</script>
</head>
<body>
<form method="POST">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"> <br>
<input type="submit" value="send" id="submitForm" name="Log In" disabled="disabled">
</form>
</body>
</html>
结帐 This DEMO
此外，不需要 JavaScript 的最简单的解决方案是使用 HTML 属性 required
<form method="POST">
Username: <input type="text" name="username" required><br>
Password: <input type="password" name="password" required> <br>
<input type="submit" value="send" id="submitForm" name="Log In">
</form>
关于javascript - 填写所有输入后启用提交按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49662830/