HOWTO · JavaScript
JavaScript deaktivieren Schaltfläche klicken
Um einen Schaltflächenklick über die JavaScript-Konvention zu deaktivieren, ist es erforderlich, die Instanz der Schaltfläche auszuwählen und die Eigenschaft `disabled` darauf anzuwenden. jQuery-Attribut deaktiviert wird auch parallel verwendet, um Schaltflächen nach einem einzigen Klick zu deaktivieren.
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.
