多步骤表单单选按钮验证 实现选中后启用下一步按钮 优先jQuery方案

第一步：引入jQuery #

在页面<head>标签中加入jQuery依赖：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

第二步：替换原有JS逻辑 #

删除原来的JS代码，替换为以下内容：

var currentTab = 0;
showTab(currentTab);

// 监听所有单选按钮的选中事件，实时更新下一步按钮状态
$('.tab input[type="radio"]').on('change', function() {
    checkCurrentTabValid();
});

function showTab(n) {
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    if (n == (x.length - 1)) {
        $("#nextBtn").text("Submit");
    } else {
        $("#nextBtn").text("Next");
    }
    fixStepIndicator(n);
    // 切换tab后立即校验当前步骤，重置按钮状态
    checkCurrentTabValid();
}

function nextPrev(n) {
    var x = document.getElementsByClassName("tab");
    if (n == 1 && !validateForm()) return false;
    x[currentTab].style.display = "none";
    currentTab = currentTab + n;
    if (currentTab >= x.length) {
        document.getElementById("regForm").submit();
        return false;
    }
    showTab(currentTab);
}

// 校验当前步骤是否有选中的单选按钮
function checkCurrentTabValid() {
    const hasChecked = $(`.tab:eq(${currentTab}) input[type="radio"]:checked`).length > 0;
    $("#nextBtn").prop("disabled", !hasChecked);
    return hasChecked;
}

function validateForm() {
    const valid = checkCurrentTabValid();
    if (valid) {
        document.getElementsByClassName("step")[currentTab].className += " finish";
    }
    return valid;
}

function fixStepIndicator(n) {
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
    }
    x[n].className += " active";
}

逻辑说明 #

1. 实时监听单选按钮选中状态：只要用户在当前步骤选中任意选项，下一步按钮自动解锁，未选中时始终禁用
2. 切换步骤自动校验：每次切换到新的步骤时，会自动检查是否有已选项，没有的话直接禁用下一步按钮
3. 保留原有提交校验逻辑，避免前端限制被绕过的异常提交
4. 兼容原有UI交互逻辑，不需要修改HTML和CSS代码

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