如何让HTML表单填写后未提交前保持不可修改状态？

前端纯HTML+JS简便实现 #

这是最快捷的实现方式，无需后端依赖，直接在前端处理交互逻辑：

1. 复选框锁定（勾选后不可取消）

监听复选框的change事件，一旦用户完成勾选，就给元素添加disabled属性，此时复选框无法再取消勾选，除非刷新页面。

代码示例：

<input type="checkbox" id="lock-checkbox"> 同意条款

<script>
document.getElementById('lock-checkbox').addEventListener('change', function(e) {
  if (e.target.checked) {
    e.target.disabled = true;
  }
});
</script>

2. 文本框输入后锁定（回车/Tab触发）

监听文本框的keydown事件，判断按下的是回车（键码13）或Tab（键码9），触发后将文本框设置为readonly（可选中复制，不可编辑）或disabled（完全不可交互）。

代码示例：

<input type="text" id="lock-input" placeholder="输入后按回车/Tab锁定">

<script>
document.getElementById('lock-input').addEventListener('keydown', function(e) {
  // 匹配回车或Tab键
  if (e.keyCode === 13 || e.keyCode === 9) {
    e.preventDefault(); // 可选：阻止默认的回车提交或Tab跳转行为
    this.readOnly = true; // 也可使用 this.disabled = true; 完全禁用交互
  }
});
</script>

Django后端增强方案（适合需持久化状态的场景） #

如果需要确保锁定状态不被前端篡改，可以结合Django的表单处理逻辑：

1. 在表单初始化时，根据实例状态设置字段的只读/禁用属性：

class MyForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 若实例已保存（即已提交过），锁定对应字段
        if self.instance.pk:
            self.fields['my_text_field'].widget.attrs['readonly'] = True
            self.fields['my_checkbox'].widget.attrs['disabled'] = True

2. 在模板中根据实例状态渲染不同的内容：

{% if form.instance.pk %}
    <p>{{ form.my_text_field.value }}</p>
    <input type="checkbox" checked disabled> {{ form.my_checkbox.label }}
{% else %}
    {{ form.my_text_field }}
    {{ form.my_checkbox }}
{% endif %}

总结 #

这些都是轻量的实现方式，无需复杂的单独开发：

• 纯前端方案适合无需后端验证的快速演示场景；
• Django方案适合需要数据持久化、防止前端篡改的正式业务场景。

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