实现Checkbox勾选后启用Button，点击Button弹出用户ID验证Modal

没问题，我来帮你搞定这个需求！下面是完整的实现代码，包含了你要的所有功能，我会把关键逻辑给你讲明白：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox & Modal Demo</title>
    <style>
        /* 模态框基础样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4); /* 半透明背景 */
        }

        /* 模态框内容容器 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            border-radius: 8px;
        }

        /* 关闭按钮 */
        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 按钮样式 */
        #submitBtn {
            padding: 8px 16px;
            cursor: pointer;
            border-radius: 4px;
            border: none;
            background-color: #007bff;
            color: white;
        }

        #submitBtn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <!-- 初始表单 -->
    <input type="checkbox" name="option1" id="option1" value="Request Info"> option 1<br>
    <input type="checkbox" name="option2" id="option2" value="Delete Info"> option 2<br><br>

    <button id="submitBtn" disabled>提交请求</button>

    <!-- 用户ID验证模态框 -->
    <div id="idModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h3>验证用户ID</h3>
            <label for="userId">用户ID:</label>
            <input type="text" id="userId" placeholder="请输入你的用户ID">
            <br><br>
            <button id="verifyBtn">验证</button>
            <p id="verifyMessage"></p>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const option1 = document.getElementById('option1');
        const option2 = document.getElementById('option2');
        const submitBtn = document.getElementById('submitBtn');
        const idModal = document.getElementById('idModal');
        const closeBtn = document.querySelector('.close-btn');
        const verifyBtn = document.getElementById('verifyBtn');
        const userIdInput = document.getElementById('userId');
        const verifyMessage = document.getElementById('verifyMessage');

        // 监听checkbox的change事件，更新按钮状态
        function updateButtonState() {
            // 检查是否至少有一个checkbox被勾选
            submitBtn.disabled = !(option1.checked || option2.checked);
        }

        option1.addEventListener('change', updateButtonState);
        option2.addEventListener('change', updateButtonState);

        // 点击按钮打开模态框
        submitBtn.addEventListener('click', () => {
            idModal.style.display = 'block';
            // 清空之前的输入和提示
            userIdInput.value = '';
            verifyMessage.textContent = '';
        });

        // 点击关闭按钮关闭模态框
        closeBtn.addEventListener('click', () => {
            idModal.style.display = 'none';
        });

        // 点击模态框外部关闭模态框
        window.addEventListener('click', (e) => {
            if (e.target === idModal) {
                idModal.style.display = 'none';
            }
        });

        // 用户ID验证逻辑
        verifyBtn.addEventListener('click', () => {
            const userId = userIdInput.value.trim();
            if (!userId) {
                verifyMessage.textContent = '请输入有效的用户ID！';
                verifyMessage.style.color = 'red';
                return;
            }
            // 这里可以添加更复杂的验证逻辑，比如格式校验、后端接口验证等
            verifyMessage.textContent = `用户ID ${userId} 验证通过！`;
            verifyMessage.style.color = 'green';
            // 验证通过后可以关闭模态框，或者执行其他操作
            setTimeout(() => {
                idModal.style.display = 'none';
            }, 1500);
        });
    </script>
</body>
</html>

• 按钮状态控制：通过updateButtonState函数监听两个checkbox的change事件，只要有一个checkbox被勾选，就把按钮的disabled属性设为false，否则保持true。
• 模态框交互：点击按钮时显示模态框，点击关闭按钮或模态框外部区域时隐藏模态框，同时每次打开时会清空输入框和提示信息。
• 用户ID验证：做了最基础的非空校验，你可以根据需求扩展，比如检查ID的格式（比如必须是数字、长度限制），或者调用后端接口进行真实验证。

这个代码直接就能运行，样式也做了基础美化，你可以根据自己的需求调整样式和验证逻辑~

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