Django编辑页面：如何根据存储值显示/隐藏表单字段？

把你之前实现的切换逻辑抽成可复用函数，同时在页面加载时自动执行一次，就能解决编辑页面初始化状态不对的问题：

// 封装切换字段显示/隐藏的核心逻辑
function toggleEndDateField() {
    // 注意：这里的id要和Django表单生成的实际id对应，默认是id_<字段名>
    const validitySelect = document.getElementById('id_certValidity');
    const endDateGroup = document.getElementById('id_certEndDate').closest('.form-group');
    
    if (validitySelect.value === 'One Time') {
        endDateGroup.style.display = 'none';
        // 可选：禁用字段避免无效提交
        // document.getElementById('id_certEndDate').disabled = true;
    } else {
        endDateGroup.style.display = 'block';
        // document.getElementById('id_certEndDate').disabled = false;
    }
}

// 页面加载完成后初始化字段状态，同时保留下拉框的切换监听
document.addEventListener('DOMContentLoaded', function() {
    // 初始化：根据已保存的值设置字段显示状态
    toggleEndDateField();
    
    // 绑定下拉框变化事件，保持原有的切换功能
    document.getElementById('id_certValidity').addEventListener('change', toggleEndDateField);
});

注意事项： #

• 确认元素id与Django表单生成的一致：ModelForm默认生成的字段id格式是id_<字段名>，如果自定义了表单控件id，需要对应修改代码里的id值。
• 操作表单组而非单独输入框：如果用了Bootstrap这类框架，字段通常包裹在.form-group容器里，隐藏整个容器能连标签一起隐藏，更符合页面布局逻辑。
• 后端校验不可少：前端显示隐藏只是交互优化，后端必须再次校验certValidity为One Time时，certEndDate是否为空或无效，避免恶意提交。

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