为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 URL参数读取改进版
Jan 16 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
详解微信小程序网络请求接口封装实例
May 02 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 split汉字
2009/06/05 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python中的字符串替换操作示例
2016/06/27 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
金融专业应届生求职信
2013/11/02 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
贷款担保书范文
2014/05/13 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
同意报考公务员证明
2015/06/17 职场文书
正规欠条模板
2015/07/03 职场文书
初中班主任心得体会
2016/01/07 职场文书