本文介绍如何通过原生 javascript 控制表单提交按钮的启用与禁用状态，确保用户必须先勾选“我不是机器人”复选框后，提交按钮才可点击，从而模拟 recaptcha 的基础验证逻辑。
本文介绍如何通过原生 javascript 控制表单提交按钮的启用与禁用状态，确保用户必须先勾选“我不是机器人”复选框后，提交按钮才可点击，从而模拟 recaptcha 的基础验证逻辑。
要实现“仅在复选框勾选后才显示/启用提交按钮”的效果，关键在于监听复选框的 change 事件，并动态修改提交按钮的 disabled 属性。注意：这里推荐使用
以下是完整、可直接运行的 HTML + JavaScript 示例：
Please check the box to verify you're not a robot.
<script> // 等待 DOM 加载完成后再执行脚本 document.addEventListener('DOMContentLoaded', function () { const checkbox = document.getElementById('check'); const submitBtn = document.getElementById('submitBtn'); checkbox.addEventListener('change', function () { // 根据复选框是否被勾选，启用或禁用提交按钮 submitBtn.disabled = !this.checked; }); }); </script>
✅ 关键要点说明：
- 使用 disabled 布尔属性控制按钮可用性（submitBtn.disabled = true/false 比 setAttribute/removeAttribute 更简洁可靠）；
- 将
- 添加 DOMContentLoaded 事件包裹逻辑，防止脚本执行时 DOM 元素尚未加载；
- 语义化标签（如
⚠️ 注意事项：
- 此方案仅为前端交互增强，不具备真实安全防护能力——实际项目中仍需服务端校验 recaptcha 字段；
- 若需视觉上“隐藏/显示”按钮（而非禁用），可改用 submitBtn.style.display = this.checked ? 'inline-block' : 'none'，但禁用模式更符合无障碍规范（避免用户误点不可用按钮）；
- 避免将
通过以上实现，你已成功构建了一个符合基础交互逻辑的伪 reCAPTCHA 表单验证流程，既满足教学演示需求，也体现了现代 Web 表单开发中的关键实践原则。
