Wie gehe ich über einen Button zu deaktivieren auf dem jQuery UI - Dialog . Ich kann dies anscheinend in keiner der Dokumentationen unter dem obigen Link finden.
Ich habe 2 Schaltflächen auf der Modalbestätigung ("Bestätigen" und "Abbrechen"). In bestimmten Fällen möchte ich die Schaltfläche "Bestätigen" deaktivieren.
.button()
Plugins, sodass sie nicht mehr unbedingt die besten / saubersten Lösungen sind.Antworten:
Wenn Sie das
.button()
Plugin / Widget einschließen, das die jQuery-Benutzeroberfläche enthält (wenn Sie über die vollständige Bibliothek verfügen und über 1.8+ verfügen, verfügen Sie über diese), können Sie damit die Schaltfläche deaktivieren und den Status visuell aktualisieren:Sie können es hier ausprobieren ... oder wenn Sie eine ältere Version verwenden oder das Schaltflächen-Widget nicht verwenden, können Sie es folgendermaßen deaktivieren:
Wenn Sie es in einem bestimmten Dialogfeld möchten, z. B. nach ID, gehen Sie folgendermaßen vor:
In anderen Fällen, in denen
:contains()
möglicherweise falsch positive Ergebnisse erzielt werden, können Sie.filter()
diese verwenden, aber hier ist es übertrieben, da Sie Ihre beiden Schaltflächen kennen. Wenn dies in anderen Situationen der Fall ist, würde es so aussehen:Dies würde verhindern
:contains()
, dass ein Teilstring von etwas anderem übereinstimmt.quelle
$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
obwohl Sie, wenn Sie die Schaltfläche für eine Funktion deaktivieren möchten, die Sie dafür haben, diesen Dialog Widgetisieren und die Schaltfläche danach deaktivieren müssen; so$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
Es sieht so aus, als hätte jemand, selbst in dieser verknüpften Frage , diese Lösung vorgeschlagen, ähnlich dem ersten Teil der Antwort von Nick Craver:
Dann sollten Sie an anderer Stelle in der Lage sein, die API für die Schaltfläche jquery UI zu verwenden:
quelle
{text:"ok",disabled:true,click: function(){}}
$("#dialog").dialog("widget").find(".button-ok-class").button("enable")
Sie können auch das
nichtjetzt dokumentiertedisabled
Attribut verwenden:Verwenden Sie zum Aktivieren nach dem Öffnen des Dialogfelds:
JsFiddle: http://jsfiddle.net/xvt96e1p/4/
quelle
attr: { 'data-value' : 'some value here' }
ob Sie das Attributdata-value
zur Schaltfläche hinzufügen möchten.disabled
Attribut beim Erstellen der Schaltflächen zugewiesen werden muss.Folgendes funktioniert innerhalb der Schaltflächenklickfunktion:
quelle
Eine Schaltfläche wird von der Klasse identifiziert
ui-button
. So deaktivieren Sie eine Schaltfläche:Sofern Sie den Dialog nicht dynamisch erstellen (was möglich ist), kennen Sie die Position der Schaltfläche. So deaktivieren Sie die erste Schaltfläche:
Die
ui-state-disabled
Klasse verleiht einem Knopf einen schönen, gedimmten Stil.quelle
Ich habe eine jQuery-Funktion erstellt, um diese Aufgabe etwas zu vereinfachen. Wahrscheinlich gibt es jetzt eine bessere Lösung ... so oder so, hier sind meine 2 Cent. :) :)
Fügen Sie dies einfach Ihrer JS-Datei hinzu:
Deaktivieren Sie die Schaltfläche 'Ok' im Dialog mit der Klasse 'Dialog':
Alle Schaltflächen aktivieren:
Aktivieren Sie die Schaltfläche "Schließen" und ändern Sie die Farbe:
Text auf allen Schaltflächen rot:
Hoffe das hilft :)
quelle
quelle
Sie können das Schaltflächenarray überschreiben und nur die benötigten übrig lassen.
quelle
Dieser Code deaktiviert die Schaltfläche mit 'YOUR_BUTTON_LABEL'. Sie können den Namen in enthält () ersetzen. Etwas deaktivieren
Ersetzen Sie 'YOUR_BUTTON_LABEL' durch die Beschriftung Ihrer Schaltfläche. ermöglichen
quelle
Sie können dies tun, um die erste Schaltfläche zu deaktivieren, zum Beispiel:
quelle
So wie ich es mache ist
Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }
Dies ist der kürzeste und einfachste Weg, den ich gefunden habe.
quelle
Wenn Sie Knockout verwenden, ist dies sogar noch sauberer. Stellen Sie sich vor, Sie haben Folgendes:
Die Magie kommt von der jQuery-UI-Quelle :
Sie können grundsätzlich JEDE jQuery-Instanzfunktion aufrufen, indem Sie sie über das Schaltflächenobjekt übergeben.
Wenn Sie beispielsweise HTML verwenden möchten:
Oder wenn Sie der Schaltfläche eine Klasse hinzufügen möchten (Sie können dies auf mehrere Arten tun):
Vielleicht bist du verrückt und möchtest den Knopf aus dem Dom entfernen, wenn er schwebt:
Ich bin wirklich überrascht, dass niemand dies in den unzähligen Threads wie diesem erwähnt zu haben scheint ...
quelle
Das hat bei mir funktioniert -
quelle
Sie können eine Schaltfläche deaktivieren, wenn Sie den Dialog erstellen:
Oder Sie können es jederzeit deaktivieren, nachdem der Dialog erstellt wurde:
quelle