网站地图    收藏   

主页 > 前端 > javascript >

js控制按钮在点击后是否可用实例

来源:自学PHP网    时间:2014-09-19 14:48 作者: 阅读:

[导读] 文章来给各位同学介绍js控制按钮在点击后是否可用实例,希望此教程对大家会有所帮助。...

用法:

 object.disabled = false | true;

1、规定时间内获取验证码,防止多次获取:

 代码如下 复制代码

<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");          
            o.value="免费获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value="重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                time(o)
            },
            1000)
        }
    }
document.getElementById("btn").onclick=function(){time(this);}
                         
</script>

 2、为了防止用户多次点击某按钮,造成多次提交表单的操作。某些按钮需要在点击后实现不可用操作。

 代码如下 复制代码

<html>
<head>
<title>同意条款</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="Submit" value="同意" />
</form>
<script language="javascript">
document.form1.Submit.disabled = true;
var wait = 9; //停留时间
function updateinfo(){
  if(wait == 0){
    document.form1.Submit.value = "我同意";
    document.form1.Submit.disabled = false;
  }
  else{
    document.form1.Submit.value = "阅读条款"+wait;
    wait--;
    window.setTimeout("updateinfo()",1000);
  }
}
updateinfo();
</script>
</body>
</html>

 设置按钮是可用与否,用到了:disabled属性。

 例子:w3cschool

 代码如下 复制代码

<html>
<head>
<script type="text/javascript">
function disable()
  {
  document.getElementById('txt1').disabled=true;
  }
function enable()
  {
  document.getElementById('txt1').disabled=false;
  }
</script>
</head>
<body>
         
<textarea id="txt1">
Hello world....This is a text area
</textarea>
<br />
<input type="button" onclick="disable()" value="Disable" />
<input type="button" onclick="enable()" value="Enable" />
         
</body>
</html>

总结,

上面三个实例都是基于input的本身属性disabled来设置了,这样我们不管是点击还是使用定义控制都到最后设置了disabled属性。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论