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插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
js 实现验证码输入框示例详解
Sep 23 Javascript
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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
起诉离婚协议书样本
2014/11/25 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers