Loading

jquery 控制按钮几秒后可用 [代码片段]

在某些提交表单等场景，有些控制按钮是几秒钟后可用，这几秒是灰色不可用的。今天使用jquery，写一写。在网上找了几个发现有很多问题，不是自己想要的效果，经过改动，终于可以啦，备注一下。

HTML代码：

View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--引入jquery文件-->
    <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    <!--引入我们自己写的js文件-->
    <script type="text/javascript" src="Scripts/jwyloadmessage.js"></script>
    
</head>
<body>

     <input id="btnTest" type="button" name="testbutton" value="提交"  />
</body>
</html>

js代码：

///<reference path="../Scripts/jquery-1.7.1.js">


$(document).ready(function () {    

    $("#btnTest").click(function () {
        if (!canSubmit) {
            updateTimeLabel(5);
        }
    });
    var canSubmit;//标志
    function updateTimeLabel(time) {
        var btn = $("#btnTest");
        btn.fadeIn(1000);
        btn.val(time <= 0 ? "提交" : ("" + (time) + "秒后可提交"));
        var hander = setInterval(function () {
            if (time <= 0) {
                
                canSubmit = false;
                
                clearInterval(hander);
                btn.val("提交");
                btn.removeAttr("disabled");
            }
            else {
                canSubmit = true;
                btn.attr({ "disabled": "disabled" });
                btn.val("" + (time--) + "秒后可提交");
            }
        }, 1000);
        
    }

});

以上代码经过测试：IE 8.0+ 、firefox

-----“让这个世界因为有了我，而有一点点的不一样。”------

 

本文版权归本人和博客园共同所用，转载请注明出处。

posted @ 2012-05-30 13:19  Cooper_Liu  阅读(2787)  评论(0)  编辑  收藏  举报