JavaScript deaktivieren Schaltfläche klicken
-
Verwendung der JavaScript-Eigenschaft
disabled
zum Deaktivieren von Schaltflächenklicks -
Verwenden Sie das jQuery-Attribut
disabled
, um einen Button-Klick zu deaktivieren
![JavaScript deaktivieren Schaltfläche klicken](/img/JavaScript/feature-image---javascript-disable-button-clicks.webp)
In JavaScript funktioniert die Eigenschaft disabled
nur gut für die Schaltflächen, die als type="submit"
gerootet sind. Andernfalls funktioniert es nicht wie ein "one submit button"
; vielmehr werden mehrere Übermittlungen akzeptiert.
Ähnlich funktioniert das jQuery-Attribut disabled
für die Schaltfläche mit dem Typ submit
. Auch die Art der Formularübermittlung ist in dieser Hinsicht sehr wichtig.
In unseren Beispielsets sehen wir die Implementierung der JavaScript-Eigenschaft disabled
und des jQuery-Attributs disabled
.
Verwendung der JavaScript-Eigenschaft disabled
zum Deaktivieren von Schaltflächenklicks
Im Allgemeinen definieren wir ein Formular und seine Methode, um den Zweck der Einreichungen sicherzustellen. Unabhängig davon können wir mit der JavaScript-Eigenschaft disabled
eine Schaltfläche inaktiv machen.
Hier werden wir ein input
-Feld initiieren, das den Typ submit
bezeichnet. Später nehmen wir eine Instanz des input
-Tags und feuern die disabled
-Eigenschaft.
Code-Auszug:
<body>
<p>Click the button to submit data!</p>
<p>
<input type='submit' value='Submit' id='btClickMe'
onclick='save();'>
</p>
<p id="msg"></p>
</body>
<script>
function save() {
var dis = document.getElementById('btClickMe').disabled = true;
var msg = document.getElementById('msg');
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html>
Ausgabe:
Verwenden Sie das jQuery-Attribut disabled
, um einen Button-Klick zu deaktivieren
In jQuery haben wir einen ähnlichen Anwendungsfall des Attributs disabled
. Der Unterschied besteht hier darin, dass wir das input
-Feld (Schaltfläche vom Typ submit
) innerhalb eines form
-Tags initiieren.
Wir werden sicherstellen, dass dies auch innerhalb des Formulars funktioniert.
Code-Auszug:
<body>
<form id="fABC" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal button" id="btnTest">
<script>
$(document).ready(function () {
$("#fABC").submit(function (e) {
e.preventDefault();
$("#btnSubmit").attr("disabled", true);
$("#btnTest").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
Ausgabe:
Die jQuery-Methode zum Deaktivieren einer Schaltfläche ähnelt JavaScript. Im Beispiel haben wir einen allgemeinen Button mit dem type=button
hinzugefügt, der nicht mit dem Attribut oder Property disabled
behandelt werden kann.
So funktioniert die JavaScript- oder jQuery-Eigenschaft disabled
, um eine Senden-Schaltfläche zu deaktivieren.