MVC表单点击后控件失效，添加模态框后异常求助

安全阿岳

2026-7-7

问题原因及解决方案

核心原因分析

模态框缺失Bootstrap标准属性
Bootstrap模态框依赖tabindex="-1"、aria-hidden="true"等无障碍属性来管理页面焦点和交互逻辑。你的模态框未添加这些属性，导致Bootstrap内部逻辑异常，错误地将表单控件标记为禁用状态——即使模态框未显示，初始化过程也可能触发了错误的交互控制。
未明确的模态框回调函数逻辑
你提供的代码中缺少cancelUserCreation和confirmUserCreation函数的实现，这两个函数可能未正确处理模态框关闭后的表单状态恢复，甚至可能在某些场景下意外触发了控件禁用。
Bootstrap资源冲突
如果页面重复引入Bootstrap JS文件，或者CSS与JS版本不匹配，会导致模态框的事件监听逻辑混乱，进而影响表单控件的可用性。

针对性解决方案

1. 补全模态框标准属性

修改模态框HTML，添加必要的属性，确保Bootstrap能正确识别和处理：

<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmationModalTitle">Veuillez confirmer</h5>
            </div>
            <div class="modal-body">
                En cliquant continuer, vous créez un utilisateur pour le client suivant:
                <p>Client ID: <span id="modal-client-id"></span></p>
                <p>Compagnie: <span id="modal-company-name"></span></p>
                <p>Adresse: <span id="modal-address"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="cancelUserCreation()" data-dismiss="modal">Canceller</button>
                <button type="button" class="btn btn-primary" onclick="confirmUserCreation()">Confirmer</button>
            </div>
        </div>
    </div>
</div>

2. 完善模态框回调函数

确保关闭和确认函数正确恢复表单状态：

function cancelUserCreation() {
    $('#confirmationModal').modal('hide');
    // 强制恢复所有表单控件的可用状态
    $('form input, form select').prop('disabled', false);
}

function confirmUserCreation() {
    $('#confirmationModal').modal('hide');
    // 执行表单提交逻辑（根据业务需求调整）
    $('form').submit();
}

3. 检查Bootstrap资源引入

确认页面仅引入一次Bootstrap的CSS和JS文件，且版本完全匹配（比如Bootstrap 4.x的CSS要对应4.x的JS），避免脚本冲突。

4. 临时排除动画类影响

移除模态框的fade类测试，如果问题消失，说明是动画过渡逻辑导致的交互异常，可以重新引入fade类或调整动画相关的事件监听。

内容的提问来源于stack exchange，提问作者Gérald Moïse