2009-03-09 12 views
5

Wenn ich eine Schaltfläche habe, die ein jquery-Skript auslöst, gibt es eine Möglichkeit, sicherzustellen, dass die Schaltfläche inaktiv ist, bis das Skript abgeschlossen ist?JQuery Script Load Timing

Antwort

10

Irgendwo am Anfang des Skripts (wahrscheinlich auf der Click-Ereignisse der Schaltfläche), stellen Sie die disabled-Attribut auf true der Schaltfläche:

$("#mybutton").attr("disabled", true); 

Wenn dann abgeschlossen ist, entfernen Sie dieses Attribut:

$("#mybutton").removeAttr("disabled"); 

BEARBEITEN:

Wenn Sie (etwas) ausgefallen sein möchten, ändern Sie den Text der Schaltfläche, während Sie die Arbeit erledigen. Wenn es eine Bildschaltfläche ist, können Sie die src in eine freundliche "Bitte warten" Nachricht ändern. Hier ist ein Beispiel für die Schaltfläche Textversion:

$("#mybutton").click(function() { 
    var origVal = $(this).attr("value"); 

    $(this).attr("value", "Please wait..."); 
    $(this).attr("disabled", true); 

    //Do your processing. 

    $(this).removeAttr("disabled"); 
    $(this).attr("value", origVal); 
}); 
33

Dies ist ein Bereich, wo Ich mag jQuery erweitern:

$.fn.disable = function() { 
    return this.each(function() { 
     if (typeof this.disabled != "undefined") this.disabled = true; 
    }); 
} 

$.fn.enable = function() { 
    return this.each(function() { 
     if (typeof this.disabled != "undefined") this.disabled = false; 
    }); 
} 

und dann können Sie tun:

$("#button").disable(); 
$("#button").enable(); 

finde ich mich Deaktivieren/Aktivieren von Steuerelementen viel.

+0

Ich bevorzuge diese Lösung. Sie könnten die Funktion auch leicht erweitern, um den Text zu ändern. – Raithlin

3

Danke cletus für Ihre Funktion. Ich habe Ihre Funktion verwendet und eigene erstellt, um deaktivierte Elemente umzuschalten.

$.fn.toggleDisable = function() { 
    return this.each(function() { 
     if (typeof this.disabled != "undefined"){ 
       if(this.disabled){ 
        this.disabled = false; 
       }else{ 
        this.disabled = true; 
       } 
     } 
    }); 
}