为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 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解Angular路由之路由守卫
May 10 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
有关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连接access数据库
2008/03/27 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
yii2安装详细流程
2018/05/23 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python3.7 sys模块的具体使用
2019/07/22 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python 带时区的日期格式化操作
2020/10/23 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
企业演讲比赛主持词
2014/03/18 职场文书
入职担保书范文
2014/05/21 职场文书
2014教师研修学习体会
2014/07/08 职场文书
2015年人民调解工作总结
2015/05/18 职场文书