disable button for x min

by Akram kamal

HTML

<body>
    <div>
        <button>Click 1</button>
        <button>Click 2</button>
        <button>Click 3</button>
    </div>
</body>

CSS

div{
    margin:0 auto;
    padding:10px;
    vertical-align:middle;
    background-image: -moz-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: -o-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: -webkit-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: -ms-linear-gradient(bottom, white 0%, #CCC 100%);
    background-image: linear-gradient(bottom, white 0%, #CCC 100%);
}
button{
    color:#2b2b2b;
    text-shadow:0 1px 0 #999;
    font-size:18px;
    font-weight:bold;
    text-transform:uppercase;
    cursor:pointer;
    margin:0 5px;
    border-radius:12px;
    -moz-box-shadow:4px 4px 4px #CCC;
    -o-box-shadow:4px 4px 4px #CCC;
    -ms-box-shadow:4px 4px 4px #CCC;
    -webkit-box-shadow:4px 4px 4px #CCC;
    box-shadow:4px 4px 4px #CCC;
    background-image: -moz-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: -o-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: -ms-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: -webkit-linear-gradient(top, #CCC 0%, #666 100%);
    background-image: linear-gradient(top, #CCC 0%, #666 100%);
}
button:hover{
    color:#3c3c3c;
    background-image: -moz-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: -o-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: -ms-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: -webkit-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
    background-image: linear-gradient(top, #CCC 0%, white 20%, #666 100%);
}
button:disabled{
    color:#999;
    cursor:default;
    background:#CCC;
}

JavaScript

$.fn.disableFor = function(mins, secs) {
    var i = [],
    play = [];

    this.click(function() {
        var selector = $(this),
        inDex = $(selector).index(),
        prevText = $(selector).text();
        i[inDex] = 0;
        var inSeconds = mins * 60 + secs;

        $(selector).prop("disabled", "disabled");
        
        play[inDex] = setInterval(function() {
            if(inSeconds > 60){
                inSeconds = inSeconds - 1;
                var minutes = Math.floor(inSeconds / 60);
                var seconds = inSeconds % 60;
                if(minutes >= 1){
                    if(seconds.toString().length > 1){
                        $(selector).text(minutes + ":" + seconds + " minutes left");
                    }else{
                        $(selector).text(minutes + ":" + "0" + seconds + " minutes left");
                    }
                }else{
                    $(selector).text(seconds + " seconds left");
                }
            }else{
                if(inSeconds > 1){
                    inSeconds = inSeconds - 1;
                    if(inSeconds.toString().length > 1){
                        $(selector).text(inSeconds + " seconds left");
                    }else{
                        $(selector).text("0" + inSeconds + " seconds left");
                    }
                }else{
                    $(selector).prop("disabled", "");
                    clearInterval(play[inDex]);
                    $(selector).text(prevText);
                }                              
            }
        }, 1000);
    });
};

$(function() {
    $("button").disableFor(2,0); // First parameter stands for minutes and the second for the seconds.
});