在所有输入被填充之前启用按钮，在所有输入都被填充时禁用按钮

Question

我想禁用一个按钮，直到页面上的所有输入都被填满。我只使用JavaScript而不使用html中的表单(将其更改为表单会干扰我的其他代码(。目前，当一些输入被填充(一个或多个(时，按钮将启用，但如果所有输入都被填充，按钮将禁用。当未填充任何输入时，该按钮也将被禁用。我想禁用该按钮，直到所有输入都被填充，这样用户就不能将其提交为空或只填充了一些输入。

检查输入是否已填充的JavaScript代码：

document.addEventListener('DOMContentLoaded', function(){
const required = document.querySelectorAll('.input');
function checkSubmit(button){
let isValid = true;
for(let i = 0; i <required.length; i++){
isValid = isValid && !!required[i].value;
console.log("is enabled");
}
button.disabled = isValid;
console.log("is disabled");
}
function inputHandler(button){
return function(){
checkSubmit(button);
};
}
//gets all the quiz_buttons                                                                                                                                      enableChecking();
const quizButton = document.querySelectorAll('.quiz_button');
for (const button of quizButton){
button.disabled = true;
for(let i = 0; i < required.length; i++){
required[i].addEventListener("input", inputHandler(button));
}
button.addEventListener('click', (event) =>
check_quiz(event.target.id));
}
});

Answer 1

我已经更改并简化了您现有的代码以按预期工作，只有在所有输入都已填充的情况下，所有按钮才会启用。

document.addEventListener('DOMContentLoaded', function () {
const inputs = document.querySelectorAll('input');
const quizButtons = document.querySelectorAll('button');
for (const i of inputs) {
i.addEventListener("input", checkSubmit);
}
for (const b of quizButtons) {
b.disabled = true;
b.addEventListener('click', (event) =>
check_quiz(event.target.id));
}
function checkSubmit() {
let isValid = true;
for (const i of inputs) {
isValid = isValid && !!i.value;
}
for (const b of quizButtons) {
b.disabled = !isValid;
}
}
});

一个基本的jsfiddle演示显示了这一点。

希望这能有所帮助！