为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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
JavaScript效率调优经验
Jun 04 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
JavaScript实现轮播图效果
Oct 30 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python使用配置文件过程详解
2019/12/28 Python
python实现一个猜拳游戏
2020/04/05 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
Yahoo的PHP面试题
2014/05/26 面试题
设计模式的基本要素是什么
2014/04/21 面试题
打造完美自荐信
2014/01/24 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
我的生日感言
2015/08/03 职场文书
Python OpenGL基本配置方式
2022/05/20 Python