jQuery disable

by yong

HTML

This button will be enabled once you click the button below:<br />
<button id="btn1">Click me</button>

<br />
<br />

This button will be enabled in 5 seconds:<br />
<button id="btn2">Click me</button>

CSS

button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 8px 12px;
    background: -moz-linear-gradient(
        top,
        #006adb 0%,
        #00aceb);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#006adb),
        to(#00aceb));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #02678c;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.5);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.5);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.4),
        0px 1px 0px rgba(255,255,255,0);
    cursor: pointer;
}

button:hover{
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,0.8);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,0.8);
}

[disabled],
.disabled {
    color: #bdbdbd;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #c4c4c4);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#ffffff),
        to(#c4c4c4));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #b0b0b0;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.5);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.5);
    text-shadow:
        1px 1px 0px rgba(255,255,255,0.7),
        0px 1px 0px rgba(255,255,255,0);
    cursor: default;
}

JavaScript

// jQuery Disable plugin version 1.0
// Author: Andreas Nylin
(function($) {
    $.fn.disable = function(options) {
        var opts = $.extend({}, $.fn.disable.defaults, options);
    
        function disable($this) {
            $this.attr('disabled', 'disabled');
            
            if(opts.cssClass !== '') {
                 $this.addClass(opts.cssClass);   
            }
        }
        
        function enable($this) {
            $this.removeAttr('disabled');
            $this.removeClass(opts.cssClass);   
        }
        
        function setEnableTimeout($this) {
            setTimeout(function() {
                enable($this);
            }, opts.enableAfterSeconds * 1000);
        }
        
        function setAjaxEnable($this) {
            $this.ajaxComplete(function(event, request, settings){
                var statusOk = !opts.enableOnAjaxSuccess || (opts.enableOnAjaxSuccess && request.status === 200),
                    urlOk = opts.ajaxUrl === null || settings.url === opts.ajaxUrl,
                    responseTextOk = opts.ajaxResponseText === null || request.responseText === opts.ajaxResponseText;
                if(statusOk && urlOk && responseTextOk) {
                    enable($this);
                }
            });   
        }
        
        return this.each(function() {
            var $this = $(this);
            
            disable($this);
            
            if(opts.enableAfterSeconds > 0) {
                setEnableTimeout($this);
            }
            
            if(opts.enableOnAjaxComplete || opts.enableOnAjaxSuccess) {
                setAjaxEnable($this);
            }
         });
     };
  
    $.fn.disable.defaults = {
        cssClass: '',
        enableAfterSeconds: 0,
        enableOnAjaxComplete: false,
        enableOnAjaxSuccess: false,
        ajaxUrl: null,
        ajaxResponseText: null
    };
})(jQuery);

$('#btn1').disable({ cssClass: 'disabled', enableOnAjaxComplete: true, ajaxUrl:...