jQuery countdown status to show in button

I am using the following code to countdown before enabling a button.

<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>

How can I get the button value to read value="Continue (x)", Where x is the number of seconds remaining until it's开发者_JS百科 enabled, after which it's just value="Continue"?

How about this:

Example: http://jsfiddle.net/mgSVX/2/ EDIT:(updated the example to use the text value requested)

$.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();
});​

@user113716's answer is almost working but I think 1 line code is missing so that can not work. so I modified his code as below: (actually I just added 1 line into his codes)

  $.fn.timedDisable = function(time) {
  if (time == null) {
    time = 5;
  }
  var seconds = Math.ceil(time); // 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() {
        seconds = seconds - 1;
      // 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(20);
});

I added this line to his code:

seconds = seconds - 1;

and I also removed "1000" for second calculating, because it's better for us to input "10" instead "10000" for seconds to avoid typo and calculate mistake.

here is the working demo: https://jsfiddle.net/3esmile/tuwaamcw/1/

hope it helps.