为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 arguments 对象使用介绍
Oct 18 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
原生JS实现留言板
Mar 26 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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
第十三节--对象串行化
2006/11/16 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
js常用排序实现代码
2010/12/28 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jQuery操作cookie
2016/08/08 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
js实现图片360度旋转
2017/01/22 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python按照多个条件排序的方法
2019/02/08 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
简单了解python代码优化小技巧
2019/07/08 Python
django中瀑布流写法实例代码
2019/10/14 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
软件工程师面试题
2012/06/25 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
机修工岗位职责
2013/11/24 职场文书
导游个人求职信范文
2014/03/23 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB