如何为多区段Yes/No表单添加全No选择确认弹窗验证？

直接在你的validateFinish函数中添加全No检测逻辑即可，修改后的完整代码如下：

修改后的JavaScript代码 #

$(document).ready(function() {
  $("#editRecord").on("submit", function(e) {
    var buttonClicked = $("input[type=submit][clicked=true]").val();

    if (buttonClicked === "Continue") {
      if (!validateFinish(e)) {
        e.preventDefault();
        console.log("Continue");
      }
    } else if (buttonClicked === "Save Draft") {
      if (!validateSaveDraft()) {
        e.preventDefault();
        console.log("Save Draft");
      }
    }
  });

  $("input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
  });

  function validateFinish(ev) {
    var sectionsTouched = $('tbody').has(':checked'),
      inputs = {},
      errorMessage = '';

    if (sectionsTouched.length === 0) {
      errorMessage = 'Please check something before submitting.';
    } else if (sectionsTouched.length > 1) {
      errorMessage = 'Please complete A or B or C only';
    } else {
      sectionsTouched.find('input').each(function(i, e) {
        var me = $(e),
          name = me.attr('name');
        inputs[name] = !!inputs[name] || me.is(':checked');
      });
      // 检查是否所有问题都已作答
      var allAnswered = true;
      $.each(inputs, function(k, v) {
        if (!v) {
          errorMessage = 'It appears you have not completed all questions.';
          allAnswered = false;
          return false; // 终止循环
        }
      });
      
      if (allAnswered) {
        // 检测当前区段是否全选No
        var selectedRadios = sectionsTouched.find('input:checked');
        var allNo = selectedRadios.length > 0 && selectedRadios.filter('[value="No"]').length === selectedRadios.length;
        
        if (allNo) {
          // 弹出确认对话框
          var confirmSubmit = confirm("You have selected No for your answers. Do you wish to continue?");
          if (!confirmSubmit) {
            ev.preventDefault();
            return false;
          }
        }
      }
    }
    if (errorMessage !== '') {
      $('#error').html(errorMessage);
      ev.preventDefault();
      return false;
    }
    return true;
  }

  function validateSaveDraft() {
    return true;
  }
});

关键修改说明 #

• 在确认用户仅完成一个区段且所有问题都已作答后，获取该区段内所有被选中的单选按钮
• 通过对比选中的No按钮数量和总选中按钮数量，判断是否全选了No
• 如果全选No，调用原生confirm方法弹出确认框，用户点击Cancel则阻止表单提交，点击OK则继续提交流程

你的HTML代码无需修改，直接使用即可。

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