JS实现点击复选框将按钮或文本框变为灰色不可用的方法


Posted in Javascript onAugust 11, 2015

本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法。分享给大家供大家参考。具体如下:

在注册时候经常会看不到,如果不点击阅读注册许可的话,提交按钮是灰色的,失效不能提交,必须点它一下,这个JS代码就是实现这样一个功能,只有你点击了确认提交,下边的按钮才生效。

运行效果如下图所示:

JS实现点击复选框将按钮或文本框变为灰色不可用的方法

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
jquery判断浏览器类型的代码
Nov 05 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 #Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 #Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 #Javascript
js中 javascript:void(0) 用法详解
Aug 11 #Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 #Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 #Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 #Javascript
You might like
php你的验证码安全码?
2007/01/02 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
python对数组进行反转的方法
2015/05/20 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python3个性签名设计实现代码
2018/06/19 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
车间机修工岗位职责
2014/02/28 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
学生请假条格式
2014/04/11 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android