为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)


Posted in Javascript onNovember 11, 2010

下面的例子将展示其结果是没有重载显示提交。
当用户选择一个选项上面,一个函数叫做“getVote()”执行。该功能所引发的“的OnClick”事件

<html> 
<head> 
<script type="text/javascript"> 
function getVote(int) 
{ 
if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("poll").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("GET","poll_vote.php?vote="+int,true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> <div id="poll"> 
<h3>Do you like PHP and AJAX so far?</h3> 
<form> 
Yes: 
<input type="radio" name="vote"value="0" onclick="getVote(this.value)" /> 
<br />No: 
<input type="radio" name="vote"value="1" onclick="getVote(this.value)" /> 
</form> 
</div> 
</body> 
</html>

The getVote() function does the following:
Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (vote) is added to the URL (with the value of the yes or no option)
判断控件的disabled属性是不是true,是的话return false;实现禁用radio的onclick事件并可再次启用它
方法一:(同时实现禁用,重新启用功能,只能针对button text类型的INPUT,对div无法禁用其onclick事件)
<input type="button" value="A button. Click me to see the alert box." onclick="alert('I am clicked.');" id="cmd1" />
<br/>
<input type="button" value="Click me to disable the first button" onclick="document.getElementById('cmd1').disabled=true;" />
<br/>
方法二,三:(实现移除radio的onclick事件,需再次重新注册事件,可以禁用div的onclick事件)
<input type="button" value="Click me to disable the onclick event on first button" onclick="document.getElementById('cmd1').onclick=function(){};" />

<br/>
三:
<input type="button" value="Click me to disable the onclick event on first button" onclick="document.getElementById('cmd1').onclick=null;" />

Javascript 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
JS 参数传递的实际应用代码分析
Sep 13 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
有关DOM元素与事件的3个谜题
Nov 11 #Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 #Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 #Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 #Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 #Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 #Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 #Javascript
You might like
php列出mysql表所有行和列的方法
2015/03/13 PHP
轻松实现php文件上传功能
2017/02/17 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
js实现页面转发功能示例代码
2013/08/05 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
对python中dict和json的区别详解
2018/12/18 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python 字符串常用方法汇总详解
2019/09/16 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
警校毕业生自我评价
2014/04/06 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2016春节慰问信范文
2015/03/25 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
高中班长竞选稿
2015/11/20 职场文书