Schaltfläche in jQuery deaktivieren
-
Deaktivieren Sie die Schaltfläche in jQuery, indem Sie das
event-Objekt an denonclick-Event-Handler übergeben -
Deaktivieren Sie den Button in jQuery mit der
this-Referenz imonclick-Event-Handler -
Deaktivieren Sie die Schaltfläche in jQuery Verwenden Sie die Methode
bind(), umthisden richtigen Wert zuzuweisen -
Deaktivieren Sie die Schaltfläche in jQuery Verwenden Sie die Methode
call(), umthisden richtigen Wert zuzuweisen - Deaktivieren Sie die Schaltfläche in jQuery mit Element-ID und nutzen Sie die Vorteile der flexiblen dynamischen Typisierung von JavaScript
-
Deaktivieren Sie die Schaltfläche in jQuery mit der DOM-Eigenschaft
disabledmithilfe der jQuery-Methode.prop()
In diesem Tutorial verwenden wir den Event-Handler onclick mit verschiedenen Argumenten wie dem event-Objekt, der this-Referenz und der element id, um die Schaltfläche in jQuery zu deaktivieren. Außerdem finden Sie hier Tipps zur dynamischen Typisierung in Funktionsargumenten, zu event.target versus event.currentTarget und zu den jQuery-Methoden .prop() versus .attr().
Deaktivieren Sie die Schaltfläche in jQuery, indem Sie das event-Objekt an den onclick-Event-Handler übergeben
Der Event-Handler onclick wird ausgelöst, wenn wir auf das Zielelement klicken. Standardmäßig nimmt der Callback zu onclick nur ein Argument entgegen, das event-Objekt.
Lassen Sie uns dieses Standardargument als unsere erste Methode verwenden, um die Schaltfläche in jQuery zu deaktivieren.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default event argument</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function disable(e){
$(e.currentTarget).attr("disabled","disabled");
//updating the text to disabled
$(e.currentTarget).html("I am disabled");
}
</script>
<link rel="stylesheet" href="disable_button_jQuery.css">
</head>
<body>
<div id="main">
<button id="disable_me" onclick="disable(event)">Click to disable me</button>
</div>
</body>
</html>
Wir haben ein button-Element, an das wir einen onclick-Event-Handler anhängen. Der Callback dazu übernimmt das standardmäßige Objektargument event.
Wir deaktivieren die Schaltfläche mit der Tastencodezeile:
$(e.currentTarget).attr("disabled","disabled")
Die Eigenschaft currentTarget des event-Objekts identifiziert das Element, an das der Event-Handler angehängt ist, in unserem Fall das button-Element.
Abschließend setzen wir das disabled HTML-Attribut dieses button-Elements mit der jQuery .attr()-Methode auf disabled.
Wir aktualisieren auch den button-Text, um seinen deaktivierten Zustand in der nächsten Codezeile mit der jQuery-Methode .html() anzuzeigen.
Hier ist die funktionierende Demo dieser Lösung.
Profi-Tipp:
Die Eigenschaft event target ähnelt der Eigenschaft currentTarget, bezieht sich aber auf das Element, auf dem das Ereignis ausgelöst wird. Dies könnte anders sein, wenn das DOM-Element in Fällen von Ereignisblasen weitergegeben wird.
Daher ist es in diesem Fall besser, die Eigenschaft currentTarget zu verwenden.
Deaktivieren Sie den Button in jQuery mit der this-Referenz im onclick-Event-Handler
das Problem mit der standardmäßigen this-Referenz im onclick-Event-Handler
Das Schlüsselwort this innerhalb des Ereignishandlers onclick bezieht sich auf das Element, auf dem es ausgelöst wird. Wir wissen jedoch, dass das JavaScript-Schlüsselwort this seinen Kontext zur Laufzeit dynamisch annimmt.
Daher bezieht es sich in diesem Fall standardmäßig nicht auf das auslösende Element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default this Keyword</title>
<script type="text/javascript" src="jQuery.js"></script>
<link rel="stylesheet" href="disable_button_jQuery.css"/>
<script type="text/javascript">
function disable(){
console.log("The value of this by default is : " + this);
$(this).attr("disabled","disabled");
}
</script>
</head>
<body>
<div id="main">
<button id="disable_me" onclick="disable()">Click to disable me</button>
</div>
</body>
</html>
Wir verwenden die this-Referenz innerhalb der onclick-Callback-Funktion disable. Zum besseren Verständnis protokollieren wir auch den Wert des this-Objekts.
Schauen wir uns die Ausgabe dieses Codes unten an:
Hier sind zwei Dinge passiert:
- Erstens hat unser Code die Schaltfläche nicht wie gewünscht deaktiviert.
- Zweitens, wenn wir uns den Wert von
thisin der Konsole ansehen, bezieht er sich auf daswindow-Objekt. Dies ist das erwartete Verhalten.
Wenn wir den disable-Callback außerhalb einer Funktion im Inline-Event-Handler ausführen, verweist JavaScript sein this-Schlüsselwort dynamisch auf das globale window-Objekt.
Es gibt mehrere Möglichkeiten, dieses Problem zu beheben.
Deaktivieren Sie die Schaltfläche in jQuery Verwenden Sie die Methode bind(), um this den richtigen Wert zuzuweisen
Wir können die Referenz des Schlüsselworts this im disable-Callback des onclick-Handlers mit der bind()-Methode setzen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bind method</title>
<script type="text/javascript" src="jQuery.js"></script>
<link rel="stylesheet" href="disable_button_jQuery.css"/>
<script type="text/javascript">
function disable(e){
console.log("The value of 'this' by explicity specifying it with bind method is : " + this);
$(this).attr("disabled","disabled");
//updating the text to disabled
$(this).html("I am disabled");
}
</script>
</head>
<body>
<div id="main">
<button id="disable_me" onclick="disable.bind(this)()">Click to disable me</button>
</div>
</body>
</html>
Den richtigen Kontext setzen wir mit der Zeile onclick = "disable.bind(this)()". Da sich das Schlüsselwort this des onclick lexikalisch auf das button-Element bezieht, übergeben wir this an die bind()-Methode, um diesen Wert als permanenten Wert festzulegen.
Danach ändert sich der Wert von this zur Laufzeit nicht.
Der Rest des Codes ähnelt unseren obigen Lösungen. Schauen wir uns die folgende Ausgabe an:
Unser Code deaktiviert nun die Schaltfläche wie gewünscht. Auch der Wert von this in der Konsolenausgabe verweist nun auf ein HTMLButtonElement.
Gotcha, auf das Sie achten müssen
Vergessen Sie nicht das Klammerpaar nach der Methode .bind(), etwa so:
onclick = "disable.bind(this)()"
.bind() verpackt die zugrunde liegende Funktion in eine neue Funktion mit dem neuen this-Wert und gibt diese Funktion zurück. Stellen Sie also sicher, dass Sie diese Wrapper-Funktion mit dem abschließenden Klammerpaar () aufrufen.
Deaktivieren Sie die Schaltfläche in jQuery Verwenden Sie die Methode call(), um this den richtigen Wert zuzuweisen
Wir können this auch den richtigen Wert zuweisen, wenn wir es mit der Methode call() aufrufen. Beachten Sie, dass call() this nur einen bestimmten Kontext für den konkreten Funktionsaufruf zuweist, während .bind() den Wert von this dauerhaft festlegt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Call method</title>
<script type="text/javascript" src="jQuery.js"></script>
<link rel="stylesheet" href="disable_button_jQuery.css"/>
<script type="text/javascript">
function disable(e){
console.log("The value of 'this' by specicifying it during execution with call method is : " + this);
$(this).attr("disabled","disabled");
//updating the text to disabled
$(this).html("I am disabled");
}
</script>
</head>
<body>
<div id="main">
<button id="disable_me" onclick="disable.call(this)">Click to disable me</button>
</div>
</body>
</html>
Den richtigen Wert von this weisen wir während der Ausführung mit dem Code-Snippet zu:
onclick = "disable.call(this)"
Wir haben die Logik des restlichen Codes bereits früher aufgeschlüsselt.
Hier ist die Ausgabe dieses Programms.
Gotcha, auf das Sie achten müssen
Hier gibt es kein abschließendes Klammerpaar () nach der Methode .call(). Die Methode .call() gibt keine neue Funktion zurück, wie dies bei der Methode .bind() der Fall ist.
Es setzt nur den neuen this-Kontext im selben Funktionsaufruf, sodass wir ihn nicht noch einmal mit den Klammern am Ende aufrufen müssen.
Deaktivieren Sie die Schaltfläche in jQuery mit Element-ID und nutzen Sie die Vorteile der flexiblen dynamischen Typisierung von JavaScript
Eines der schönen Dinge an JavaScript ist seine Flexibilität. Sie können es mit fast demselben Code dazu bringen, alles zu tun, was Sie wollen.
Dasselbe gilt für JavaScript-Funktionen. Jede Funktion in JavaScript kann so viele Argumente annehmen, wie wir übergeben möchten.
Wir müssen nicht dieselben Argumentdatentypen wie in der Funktionsdefinition übergeben, da JS eine dynamisch typisierte Sprache ist.
Lassen Sie uns diese Funktion von JavaScript ausnutzen, um die Schaltfläche in jQuery mit der Element-ID zu deaktivieren, indem wir fast den gleichen Code verwenden, wie wir ihn oben geschrieben haben.
Wir haben erwähnt, dass der Callback zum onclick nur ein Argument akzeptiert, das event-Objekt, gemäß seiner Funktionsdefinition. Aber wir werden ihm das Element-Argument id übergeben, und JavaScript wird sich nicht beschweren!
Hier ist der magische Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using Dynamic Typing</title>
<script type="text/javascript" src="jQuery.js"></script>
<link rel="stylesheet" href="disable_button_jQuery.css"/>
<script type="text/javascript">
function disable(id){ // replace id with e when you want to display the default event object type
$("#"+id).attr("disabled","disabled");
console.log("The type of argument \nwhen we pass the \n'id' type object as argument is : \n"
+ typeof arguments[0]);
// console.log("The type of argument \nwhen we pass the \ndefault 'event' object as argument is : \n"
// + typeof arguments[0]);
//update the text to disabled
$("#"+id).html("I am disabled");
}
</script>
</head>
<body>
<div id="main">
<button id="disable_me" onclick="disable('disable_me')">Click to disable me</button>
</div>
</body>
</html>
Wir übergeben die id an den Callback an den Eventhandler onclick ="disable('disable_me')"
JavaScript lässt uns dieses Argument verwenden, ohne uns darüber zu beschweren, dass sein Typ anders ist als der fest codierte Argumenttyp event in der Funktionsdefinition.
Anschließend setzen wir damit das HTML-Attribut disabled des button-Elements auf den Wert disabled, etwa so:
$("#" + id).attr("deaktiviert","deaktiviert");
Schauen wir uns die Ausgabe an:
Wir sehen, dass unser Code korrekt funktioniert. Außerdem ist in der Konsolenausgabe auf der rechten Seite der Argumenttyp eine Zeichenfolge, die unser Element id ist, das an den Callback übergeben wird.
Vergleichen wir auch den Argumenttyp, wenn wir das Standardargument vom Typ Ereignis übergeben.
<script type="text/javascript">
function disable(event){ // replace id with e when you want to display the default //event object type
//$("#"+id).attr("disabled","disabled");
// console.log("The type of argument \nwhen we pass the \n'id' type object as //argument is : \n"
// + typeof arguments[0]);
console.log("The type of argument \nwhen we pass the \ndefault 'event' object as argument is : \n"
+ typeof arguments[0]);
//update the text to disabled
// $("#"+id).html("I am disabled");
}
</script>
</head>
<body>
<div id="main">
<button id="disable_me" onclick="disable(event)">Click to disable me</button>
</div>
Hier ist die Ausgabe:
Hier sehen wir, dass der Typ des Arguments in der Konsole object ist, da event ein Objekt in JavaScript ist.
Deaktivieren Sie die Schaltfläche in jQuery mit der DOM-Eigenschaft disabled mithilfe der jQuery-Methode .prop()
Schließlich können wir auch die DOM-Eigenschaft disabled in all unseren oben genannten Lösungen verwenden. Diese Eigenschaft entspricht dem HTML-Attribut disabled, und wir können darauf mit der jQuery-Methode .prop() zugreifen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using prop method</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function disable(e){
$(e.currentTarget).prop("disabled",true);
//updating the text to disabled
$(e.currentTarget).html("I am disabled");
}
</script>
<link rel="stylesheet" href="disable_button_jQuery.css">
</head>
<body>
<div id="main">
<button id="disable_me" onclick="disable(event)">Click to disable me</button>
</div>
</body>
</html>
Der Code ist fast derselbe wie der, den wir für die Methode mit dem Standardargument event oben verwendet haben. Wir verwenden nur die DOM-Eigenschaft disabled wie folgt:
$(e.currentTarget).prop("disabled",true);
Hier ist die funktionierende Demo:
Gotcha, auf das Sie achten müssen
Beachten Sie, dass die DOM-Eigenschaft disabled einen booleschen Wert annimmt, im Gegensatz zum HTML-Attribut disabled, das den Wert disabled annimmt. Stellen Sie also sicher, dass Sie in der Methode .prop() für diese Methode den Wert true übergeben.