为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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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根据IP地址获取所在城市具体实现
2013/11/27 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python缩进和冒号详解
2016/06/01 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
学生会离职感言
2014/02/11 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
php去除deprecated的实例方法
2021/11/17 PHP