Spring Boot表单提交后保持单选按钮选中并禁用已选项

1. 修复页面加载时的状态恢复逻辑 #

页面加载完成后，读取localStorage中保存的选中值，找到对应的单选按钮并设置选中状态、禁用按钮：

window.addEventListener('DOMContentLoaded', function() {
    const savedValue = localStorage.getItem('radPiece');
    if (savedValue) {
        const targetRadio = document.querySelector(`input[name="img"][value="${savedValue}"]`);
        if (targetRadio) {
            targetRadio.checked = true;
            targetRadio.disabled = true;
            // 禁用所有其他单选按钮，彻底避免重复选择
            document.querySelectorAll('input[name="img"]').forEach(radio => {
                if (radio.value !== savedValue) {
                    radio.disabled = true;
                }
            });
        }
    }
});

2. 修复表单提交逻辑（解决addEventListener错误） #

原代码中formPiece.addEventListener报错，大概率是因为未正确获取表单元素。改用表单IDformP获取元素，同时优化提交逻辑：

替换原无效的saveform函数 #

function saveform() {
    // 确保选中值已存入localStorage（可选，check函数已在单选点击时触发）
    check();
    
    const form = document.getElementById('formP');
    if (form) {
        form.submit();
    }
}

更推荐的事件绑定方式（替代按钮onclick） #

直接给表单绑定submit事件，去掉按钮上的onclick="saveform()"：

window.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('formP');
    if (form) {
        form.addEventListener('submit', function() {
            // 提交前再次确认保存选中值
            check();
        });
    }
});

3. 优化原check函数（可选） #

简化原check函数的遍历逻辑：

function check() {
    const checkedRadio = document.querySelector('input[name="img"]:checked');
    if (checkedRadio) {
        localStorage.setItem('radPiece', checkedRadio.value);
    }
}

关键注意事项 #

• 所有DOM操作必须在页面加载完成后执行，避免出现元素找不到的错误
• 禁用单选按钮时要覆盖所有未选中项，防止用户切换选择
• 表单提交前确保选中值已存入localStorage，避免返回页面时状态丢失

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