为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必备 api中英文对照的chm手册 下载
May 03 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
UCenter Home二次开发指南
2009/05/28 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
Python制作数据导入导出工具
2015/07/31 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
简单了解python中的与或非运算
2019/09/18 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python实现随机爬山算法
2021/01/29 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
2014全国两会学习心得体会2000字
2014/03/10 职场文书
父母寄语大全
2014/04/12 职场文书
十佳家长事迹材料
2014/08/26 职场文书
离婚协议书的范本
2015/01/27 职场文书
目标责任书格式范文
2015/05/11 职场文书