如何仅用JavaScript实现所有输入框填完后启用提交按钮

你需要实现的是所有带.input类的输入框都填写完成后才启用提交按钮，核心是在输入框内容变化时实时检查所有输入框状态，再更新按钮的禁用状态。另外你之前的代码存在重复绑定事件的问题（每个按钮都给所有输入框绑一遍input事件），会导致冗余触发，需要调整。

修改后的完整代码如下：

document.addEventListener('DOMContentLoaded', function(){
    const required = document.querySelectorAll('.input');
    const quizButtons = document.querySelectorAll('.quiz_button');

    // 初始化所有按钮为禁用状态并绑定点击事件
    quizButtons.forEach(button => {
        button.disabled = true;
        button.addEventListener('click', (event) => check_quiz(event.target.id));
    });

    // 检查所有输入框是否已填写（过滤空字符和纯空格）
    function areAllInputsFilled() {
        return Array.from(required).every(input => input.value.trim() !== '');
    }

    // 给每个输入框绑定内容变化事件，实时更新按钮状态
    required.forEach(input => {
        input.addEventListener('input', () => {
            const allFilled = areAllInputsFilled();
            quizButtons.forEach(button => {
                button.disabled = !allFilled;
            });
        });
    });
});

function check_quiz(id){
    console.log("button is clicked");

    //get answers
    let response1 = document.getElementById('id_question1').value.toUpperCase().replace(/\s/g, "");
    //repeats 9 times

    //get divs
    let div1 = document.getElementById('div1');
    //repeats 9 times

    var correctAnswers = 0;

    //get quiz
    fetch(`/check/${id}`)
    .then(response => response.json())
    .then(quiz => {
        let rightM = "You got this correct. Great job!";
        //checking if the answers are right
        //#1
        let answ1 = quiz.answer1.toUpperCase().replace(/\s/g, "");
        if(answ1 === response1){
            div1.innerHTML = rightM;
            div1.classList.add("correct"); 
            correctAnswers++;
        } else{
            div1.innerHTML = `The correct answer is ${quiz.answer1}. Nice try!`;
            div1.classList.add("incorrect");
        }
        //repeats 9 times

        console.log(correctAnswers);
        //display score
        let score = document.getElementById("score");
        score.innerHTML = `Your score is ${correctAnswers}. Great job! :)`;
        score.classList.add("score_style");

         //points
        let newPoints = correctAnswers * 10;
        let currentUser = parseInt(document.getElementById("user_id").value);
        let currentPoints = parseInt(document.getElementById("user_points").value);

        let numOfPoints = currentPoints + newPoints;
        console.log(numOfPoints);

        fetch(`/points/${currentUser}`,{
            method: "PUT", 
            body: JSON.stringify({
                points: numOfPoints
            })
        })
    })
}

关键修改说明： #

• 拆分事件绑定逻辑：把按钮的初始化/点击事件和输入框的内容监听事件分开，避免重复绑定导致的冗余触发。
• 新增状态检查函数：用every方法遍历所有输入框，判断内容去除首尾空格后是否非空，过滤用户只输入空格的无效情况。
• 实时更新按钮状态：每次输入框内容变化时，根据检查结果反转按钮的disabled状态——所有输入框填满时按钮自动启用，否则保持禁用。

内容的提问来源于stack exchange，提问作者user19590524