JavaScript 实现点击复选框禁用提交按钮
作者:窗边听雨时间:2026-10-29 13:34:06浏览:155
本文介绍如何使用 JavaScript 实现点击复选框后控制提交按钮状态的功能。当用户未勾选同意条款时,提交按钮默认处于灰色不可用状态;勾选后按钮恢复可用。该代码通过遍历表单元素并修改 disabled 属性,确保用户必须确认协议才能提交表单,适用于注册页面等场景。
JavaScript 实现点击复选框禁用提交按钮
本文介绍一种通过 JavaScript 实现点击复选框来禁用或启用按钮及文本框的方法。
在注册流程中,常见的设计是要求用户阅读并同意相关条款。如果用户未勾选“我已阅读”或类似的复选框,提交按钮将保持灰色且不可点击,从而阻止表单提交。这段 JavaScript 代码旨在实现这一交互逻辑:只有当用户明确勾选确认复选框后,下方的提交按钮才会变为可用状态。
具体运行效果如下图所示:

实现该功能的详细代码如下:
<html>
<head>
<title>点击复选框按钮变为不可用</title>
</head>
<script>
var checkobj
function agreesubmit(el){
checkobj=el
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){
var tempobj=checkobj.form.elements[i]
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=!checkobj.checked
}
}
}
function defaultagree(el){
if (!document.all && !document.getElementById){
if (window.checkobj && checkobj.checked)
return true
else{
alert("Please read/accept terms to submit form")
return false
}
}
}
</script>
<body>
<form name="agreeform" onSubmit="return defaultagree(this)">
<input name="agreecheck" type="checkbox" onClick="agreesubmit(this)"><b>你确认要提交?</b><br>
<input type="Submit" value="我一定要提交" disabled>
</form>
<script>
document.forms.agreeform.agreecheck.checked=false
</script>
</body>
</html>
希望本文提供的代码示例对各位 JavaScript 开发者有所帮助。
作者最新文章
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
