为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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
js a标签点击事件
Mar 30 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
有关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
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
python使用arp欺骗伪造网关的方法
2015/04/24 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
元旦联欢会主持词
2014/03/26 职场文书
副董事长岗位职责
2014/04/02 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
娱乐节目策划方案
2014/06/10 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
大雁塔导游词
2015/02/04 职场文书
2015政治思想表现评语
2015/03/25 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
检讨书怎么写?
2019/06/21 职场文书