当页面中存在隐藏但未真正移除的 Bootstrap 模态框（modal fade）时，其默认 z-index 和透明占位可能覆盖整个表单区域，造成点击后所有输入框看似被禁用——实际是模态框遮挡了用户交互，而非 DOM 属性被修改。
当页面中存在隐藏但未真正移除的 bootstrap 模态框（`modal fade`）时，其默认 `z-index` 和透明占位可能覆盖整个表单区域，造成点击后所有输入框看似被禁用——实际是模态框遮挡了用户交互，而非 dom 属性被修改。
这是一个典型的 UI 层级遮挡（overlay masking） 问题，而非 JavaScript 逻辑误禁用表单元素。虽然 <div class="modal fade"> 在视觉上不可见，但 Bootstrap 的 .fade 类仅控制透明度（opacity: 0），同时 .modal 默认具有高 z-index（通常为 1050），且其容器尺寸仍占据文档流空间（display: block）。结果就是：模态框虽“隐形”，却像一层不可见玻璃盖在表单上方，拦截全部鼠标事件（如 click、focus），导致用户无法聚焦输入框——表现为“点击即失活”，实则输入框 disabled 属性未变，只是事件无法穿透。
✅ 正确修复方式：强制隐藏模态框容器
将模态框根元素的 display 显式设为 none，确保其完全脱离渲染流：
<!-- 修改前（隐患） --> <div class="modal fade" id="confirmationModal"> <!-- ... 内容 ... --> </div>
<!-- 修改后（推荐） --> <div class="modal fade" id="confirmationModal" style="display: none;"> <!-- ... 内容 ... --> </div>
或更规范地，在 CSS 中统一管理：
#confirmationModal {
display: none;
}⚠️ 注意：不要仅依赖 fade 或 hidden 类，Bootstrap 的 fade 是过渡类，hidden 仅影响可见性（仍占位）；必须使用 display: none 才能彻底移除布局占位和事件拦截。
? 验证是否为遮挡问题？
可通过浏览器开发者工具快速排查：
- 右键表单任意位置 → “检查元素”；
- 观察 <div class="modal"> 是否在 DOM 树中位于表单上方；
- 在 Elements 面板中临时勾选/取消勾选该模态框的 display: none，观察表单交互是否立即恢复。
? 其他安全实践建议
-
初始化时显式隐藏：在 $(document).ready() 中补充：
$('#confirmationModal').modal('hide'); // 触发 Bootstrap 隐藏逻辑，确保状态一致 - 避免手动操作 disabled 属性：本例中无 JS 主动设 disabled=true，故无需排查脚本误操作；
- 检查 z-index 冲突：若项目自定义了全局 z-index，需确保表单区域 z-index > 模态框（但根本解仍是 display: none）；
- Bootstrap 版本注意：Bootstrap 4/5 均存在此行为，fade 不等于 display: none，务必区分。
✅ 总结
表单“点击后失效”未必是代码禁用了字段，很可能是 UI 层级的隐形遮挡。遇到此类问题，优先检查是否存在 position: fixed/absolute + 高 z-index + 未彻底隐藏的覆盖元素（如模态框、加载遮罩、广告层等）。添加 style="display: none" 是最直接、零副作用的修复方案，既保持 HTML 结构完整，又杜绝事件劫持风险。
