为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 相关文章推荐
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 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获取网站域名和地址的代码
2008/08/17 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
javascript函数特点实例分析
2015/05/14 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python上下文管理器全实例详解
2019/11/12 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
座谈会主持词
2014/03/20 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
PHP基本语法
2021/03/31 PHP
mysql 获取相邻数据项
2022/05/11 MySQL