本文介绍如何通过原生 javascript 控制表单提交按钮的启用与禁用状态，确保用户必须先勾选“我不是机器人”复选框后，提交按钮才可点击，从而模拟 recaptcha 的基础验证逻辑。
本文介绍如何通过原生 javascript 控制表单提交按钮的启用与禁用状态，确保用户必须先勾选“我不是机器人”复选框后，提交按钮才可点击，从而模拟 recaptcha 的基础验证逻辑。
要实现“仅在复选框勾选后才显示/启用提交按钮”的效果，关键在于监听复选框的 change 事件，并动态修改提交按钮的 disabled 属性。注意：这里推荐使用 <button type="submit"> 而非 <input type="submit">，因其更易样式化且语义更清晰；同时，所有交互元素（包括按钮）应置于同一 <form> 标签内，以保证表单逻辑完整性与可访问性。
以下是完整、可直接运行的 HTML + JavaScript 示例：
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="check">
<div class="input-container">
<input type="checkbox" class="checkbox" id="check">
<span class="checkbox-text">I'm not a robot</span>
</div>
</label>
<img src="captcha.png" alt="CAPTCHA image" class="capcap">
<span class="recaptcha">reCAPTCHA</span><br>
<a href="#" class="hi">Privacy</a>
<span class="dash">-</span>
<a href="#" class="hi">Terms</a>
<!-- 提交按钮置于 form 内部，初始禁用 -->
<button type="submit" id="submitBtn" disabled>Submit</button>
</form>
<p>Please check the box to verify you're not a robot.</p>
<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 更简洁可靠）；
- 将 <button> 放入 <form> 内部，确保点击时能正常触发表单提交；
- 添加 DOMContentLoaded 事件包裹逻辑，防止脚本执行时 DOM 元素尚未加载；
- 语义化标签（如 <label for="check">）提升可访问性，屏幕阅读器可正确关联控件。
⚠️ 注意事项：
- 此方案仅为前端交互增强，不具备真实安全防护能力——实际项目中仍需服务端校验 recaptcha 字段；
- 若需视觉上“隐藏/显示”按钮（而非禁用），可改用 submitBtn.style.display = this.checked ? 'inline-block' : 'none'，但禁用模式更符合无障碍规范（避免用户误点不可用按钮）；
- 避免将 <button> 置于 <form> 外部，否则 type="submit" 将无法自动提交该表单。
通过以上实现，你已成功构建了一个符合基础交互逻辑的伪 reCAPTCHA 表单验证流程，既满足教学演示需求，也体现了现代 Web 表单开发中的关键实践原则。
