場景:修改頁面中任務編號輸入框設置 disabled="disabled" 防止用戶修改 ID,導致表單提交時該字段值丟失,SQL 執行變成 INSERT 而非 UPDATE。
HTML 標準規定:disabled 表單控件的值不會隨表單提交。這是設計師/前端常踩的坑。
| 方案 | 優點 | 缺點 |
|---|---|---|
改用 readonly | 值可提交、用戶不可編輯、保持原生樣式 | 輸入框仍可聚焦、部分瀏覽器樣式差異 |
| 隱藏域同步值 | 完全可控 | 需額外維護同步邏輯 |
| 提交前 JS 移除 disabled | 不改動 HTML 結構 | 依賴 JS、提交瞬間可被編輯 |
| CSS 模擬禁用狀態 | 語義正確、值正常提交 | 需自定義樣式、無障礙需額外處理 |
推薦:優先用 readonly 配合 CSS 視覺禁用樣式(background: #f5f5f5; cursor: not-allowed;),語義正確且零 JS 依賴。若必須用 disabled,提交前克隆表單移除 disabled 再提交(見下文)。