您的位置：首页 > Web前端 > JavaScript

为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)

2010-11-11 00:00 931 查看

下面的例子将展示其结果是没有重载显示提交。
当用户选择一个选项上面，一个函数叫做“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;" />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航