为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评估用户输入密码的强度实现代码
Nov 30 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
js窗口震动小程序分享
Nov 28 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 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获取远程图片并保存到本地的方法
2015/05/12 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
javascript学习之闭包分析
2010/12/02 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
python中import学习备忘笔记
2017/01/24 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
网站编辑求职信
2013/10/17 职场文书
大学生求职简历的自我评价
2013/10/21 职场文书
体育教师求职信
2014/06/30 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
工程款申请报告
2015/05/15 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
一文搞懂MySQL索引页结构
2022/02/28 MySQL
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js