jQuery 倒计时状态显示在按钮中

Question

在启用按钮之前，我使用以下代码进行倒计时。

<script type="text/javascript">
$.fn.timedDisable = function(time) {
    if (time == null) { time = 5000; }
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        setTimeout(function() {
            disabledElem.removeAttr('disabled');
        }, time);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});
</script>

如何获取按钮值以读取 value="Continue (x)", 其中 x 是启用之前剩余的秒数，之后它只是 value="Continue"？

Answer 1

这个怎么样:

示例: http://jsfiddle.net/mgSVX/2/ 编辑:(更新示例以使用请求的文本值)

$.fn.timedDisable = function(time) {
    if (time == null) {
        time = 5000;
    }
    var seconds = Math.ceil(time / 1000);  // Calculate the number of seconds
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        var originalText = this.innerHTML;  // Remember the original text content

          // append the number of seconds to the text
        disabledElem.text( originalText + ' (' + seconds + ')'); 

         // do a set interval, using an interval of 1000 milliseconds
         //     and clear it after the number of seconds counts down to 0
        var interval = setInterval(function() {
                // decrement the seconds and update the text
            disabledElem.text( originalText + ' (' + seconds + ')');  
            if (seconds === 0) {  // once seconds is 0...
                disabledElem.removeAttr('disabled')
                    .text(originalText);   //reset to original text
                clearInterval(interval);  // clear interval
            }
        }, 1000);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});​