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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
基于js中document.cookie全面解析
Sep 14 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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之字符串变相相减的代码
2007/03/19 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
Python显示进度条的方法
2014/09/20 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
python有几个版本
2020/06/17 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
利用python绘制正态分布曲线
2021/01/04 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
超市营业员岗位职责
2013/12/20 职场文书
银行求职自荐信
2014/06/30 职场文书
财务部岗位职责
2015/02/03 职场文书
中秋节主题班会
2015/08/14 职场文书
实用求职信模板范文
2019/05/13 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Python find()、rfind()方法及作用
2022/12/24 Python