基于角色状态控制HTML Submit按钮禁用的JS代码异常求助

问题原因 #

你的代码首次点击会提交表单，核心问题是：首次点击按钮时，你才给按钮绑定禁用监听，但此时表单已经触发提交动作，监听还没来得及生效；第二次点击时监听已经绑定，才会执行禁用逻辑。另外，onclick绑定函数+动态添加事件监听的方式逻辑冗余，且没有直接阻止表单提交的核心行为。

修复方案 #

我们需要从两个层面解决：

1. 页面加载完成就根据当前角色初始化按钮状态（Admin则禁用，否则启用）
2. 监听表单的submit事件，在提交前直接判断角色，Admin则阻止提交并提示，否则允许提交

修正后的完整代码 #

<h3>ACCESS RIGHTS MANAGEMENT</h3>
<h5 style="color: gray"> User selected:</h5>
<h5 style="color: red">{{ context.user_name }}</h5>
<h5 style="color: gray"> Current role:</h5>
<h5 id="roll" style="color: red">{{ context.user_role }}</h5>

<h6 style="color: black">List of roles</h6>
<div style="color: grey">
{% for role in context.all_roles %}
<label>{{ role.get('name') }}</label>
{% endfor %}
</div>
<form method="post" action="/auth/editor/{{ context.user_id }}" 
 class="row mt-3 text-center" id="roleForm">
        <div class="col-auto">
                <div class="form-floating my-box">
            <input type="text" class="form-control" id="floatingInput" name="role"
placeholder="Input a new role" required>
            <label for="floatingInput">New Role:</label>
                </div>
        </div>
        <div class="col-auto">
            <input id="button" type="submit" 
value="CHANGE" style="height: 58px" class="btn btn-sm btn-primary"/>
            <script type = "text/javascript">
                // 页面加载完成后初始化按钮状态并绑定提交监听
                document.addEventListener('DOMContentLoaded', function() {
                    const roleEl = document.getElementById('roll');
                    const submitBtn = document.getElementById('button');
                    const warningEl = document.getElementById('warning');
                    const roleForm = document.getElementById('roleForm');

                    // 初始化按钮状态
                    const isAdmin = roleEl.textContent.trim() === "Admin";
                    submitBtn.disabled = isAdmin;
                    if (isAdmin) {
                        warningEl.textContent = 'WARNING: You cannot edit Admin';
                    }

                    // 监听表单提交，阻止Admin角色的提交
                    roleForm.addEventListener('submit', function(e) {
                        if (roleEl.textContent.trim() === "Admin") {
                            e.preventDefault(); // 直接阻止表单提交
                            warningEl.textContent = 'WARNING: You cannot edit Admin';
                        }
                    });
                });
            </script>
        </div>
        <div class="col-auto">
            <label id="warning" style="color: red"></label>
        </div>
</form>

关键改动说明 #

• 移除了原按钮上的onclick='disable()'，改用表单submit事件监听，直接拦截提交行为
• 页面加载时就初始化按钮状态，不需要点击才判断角色
• 使用e.preventDefault()从根源阻止Admin角色的表单提交
• 用textContent.trim()处理文本，避免空格导致的判断错误
• 修正了原代码中的HTML标签错误：h7不是合法标签，改为div；h6的闭合标签错误已修正

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