如何解决单页面多提交按钮语言测验的重复答案与按钮禁用异常问题

看起来你遇到的核心问题是所有提交按钮都会触发对所有题目检查，以及只有第一个按钮会被禁用，这是因为你的代码没有区分不同表单的范围，下面是具体的修改方案：

1. 让检查答案的逻辑只针对当前提交的表单 #

原来的markAnswers()函数会遍历页面上所有的文本输入框，所以不管点哪个提交按钮，所有题目都会被检查一遍，导致重复显示答案。我们需要修改这个函数，让它只处理当前提交的表单内的输入：

var answers = { 
  "q1": ["Ik ben sterk"],
  "q2": ["对应的第二题正确答案"] // 记得补充第二题的正确答案
};

// 修改函数，接收当前表单作为参数，限定检查范围
function markAnswers(currentForm){
  // 只遍历当前提交表单内的文本输入框
  $(currentForm).find("input[type='text']").each(function(){
    var inputId = this.id;
    var userAnswer = this.value.trim(); // 去除前后空格，提升答案匹配的容错性
    // 先清空之前的答案提示，避免重复添加
    $(this).siblings(".answer-hint").remove();
    
    if($.inArray(userAnswer, answers[inputId]) === -1){
      $(this).after("<br><span class='answer-hint'>The correct answer: " + answers[inputId][0] + "</span>");
    } else {
      $(this).after("<br><span class='answer-hint' style='color:green;'>Correct!</span>");
    }
  })
}

// 表单提交事件，传递当前表单给检查函数
$("form").on("submit", function(e){
  e.preventDefault();
  markAnswers(this); // this指向当前被提交的表单
});

2. 让每个提交按钮都能被正确禁用 #

原来的禁用逻辑只绑定了第一个表单，我们需要改成动态绑定每个表单的提交按钮，不需要依赖固定ID：

// 给所有表单绑定提交后的禁用逻辑
$("form").on("submit", function(){
  // 动态找到当前表单内的提交按钮
  var submitButton = $(this).find("input[type='submit']");
  submitButton.attr('disabled', 'disabled');
  submitButton.val('Checked!'); // 可以改成更明确的文本，提示用户已完成检查
});

3. 优化HTML结构（可选但推荐） #

确保每个表单结构独立且ID唯一（你已经做了这步，这点很好），比如第二题的HTML可以写成：

<form id="formId2">
 <h5>2. [第二题题目内容]</h5>
 <p>Translate the above sentence.</p>
 <input type="text" id="q2" /><br><br>
 <input type="submit" class="btn btn-outline-primary" id="submitId2" value="Check answer" />
</form>

关键修改点总结 #

• 限制检查答案的范围为当前提交的表单，而非全局所有输入框
• 动态获取当前表单内的提交按钮进行禁用，摆脱固定ID的限制
• 添加清空历史提示的逻辑，避免重复显示答案反馈

这样修改后，每个提交按钮只会检查自己所属表单的题目，点击后自身会被禁用，不会影响其他按钮和题目，完全符合你的需求。

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