为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 相关文章推荐
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
javascript常用的方法分享
Jul 01 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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动态生成JavaScript代码
2009/03/09 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
Node 代理访问的实现
2019/09/19 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
SQL语言面试题
2013/08/27 面试题
三年大学自我鉴定
2014/01/16 职场文书
新三好学生主要事迹
2014/01/23 职场文书
九年级政治教学反思
2014/02/06 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
电台实习生求职信
2014/02/25 职场文书
一分钟演讲稿
2014/04/30 职场文书
节约粮食标语
2014/06/18 职场文书
创先争优演讲稿
2014/09/15 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
思品教学工作总结
2015/08/10 职场文书