为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 JSON操作入门实例
Apr 16 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
vue ref如何获取子组件属性值
Mar 31 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
PHP+DBM的同学录程序(4)
2006/10/09 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Django如何配置mysql数据库
2018/05/04 Python
在python中实现对list求和及求积
2018/11/14 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
python浪漫表白源码
2019/04/05 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
什么是设计模式
2012/06/17 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
计算机操作自荐信
2013/12/07 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
党员倡议书
2015/01/19 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Python类方法总结讲解
2021/07/26 Python
MySQL数据库完全卸载的方法
2022/03/03 MySQL