Heim >Web-Frontend >js-Tutorial >So erreichen Sie nicht anklickbare Elemente in JQuery
So erreichen Sie nicht anklickbare Elemente in JQuery
- 藏色散人Original
- 2021-01-18 09:06:182549Durchsuche
So implementieren Sie nicht anklickbare Elemente mit jquery: Fügen Sie zuerst ein Button-Tag, ein div-Tag und ein Anker-Tag hinzu. Verwenden Sie dann die Methode „$(this).attr(“disabled“, „disabled“);“ Das angegebene Tag ist deaktiviert. Das war's.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JQuery-Version 1.10.0, Dell G3-Computer.
Empfohlen: jQuery-Video-Tutorial
In vielen Fällen müssen wir basierend auf bestimmten Bedingungen und nach der Durchführung bestimmter Aktionen eine HTML-Schaltfläche oder ein Eingabe-Tag deaktivieren oder von der Webseite entfernen. Wenn Sie nach einer Möglichkeit suchen, eine beliebige Schaltfläche nicht anklickbar zu machen, d. h. die Schaltfläche mithilfe von JQuery zu deaktivieren, sind Sie hier genau richtig.
Wenn beispielsweise ein Klick auf eine Schaltfläche eine Jquery-Ajax-Funktion aufruft, bis ihre Antwort eintrifft, müssen wir die Schaltfläche deaktivieren (nicht anklickbar). Es empfiehlt sich, die Schaltfläche zu deaktivieren, damit Benutzer sie nicht immer wieder drücken.
In diesem Beitrag wird erklärt, wie Sie jede Schaltfläche deaktivieren, sei es Button-Tag, Anker-Tag oder div, li-Element.
HTML-Markup: Schaltfläche, Div und Tag hinzufügen
Hier fügen wir ein Schaltflächen-Tag, ein Div-Tag und ein Anker-Tag hinzu. Sobald darauf geklickt wird, möchten wir es nicht mehr anklickbar (deaktiviert) machen.
<div id="btnDiv">DIV CLICK</div>
<input id="btnButton" type="button" value="Button Click me" />
<a href="/" id="btnAnchr">Anchor Tag Click me</a>
Jquery代码：禁用HTML元素（div,button,anchor标签）
$("#btnButton").on('click', function () {
// JQUERY
$(this).attr("disabled", "disabled");
// JavaScript
document.getElementById("btnButton").setAttribute("disabled", "disabled");
console.log("btn clicked");
});
$("#btnDiv").on('click', function () {
$(this).off('click');
document.getElementById("btnDiv").setAttribute("disabled", "disabled");
console.log("Div clicked");
});
$("#btnAnchr").on('click', function (e) {
$(this).attr("disabled", "disabled");
e.preventDefault();
});Erklärung des obigen Codes: Wenn auf die Schaltfläche oder das Div geklickt wird, wird die Beschriftung sofort deaktiviert (nicht anklickbar).
Vollständiger Code:
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<br>
请用Chrome或Firefox浏览器访问该网页，按F12打开控制台(console)，
然后点击下面的div或按钮，看日志(log)变化。
</br><br>
<div id="btnDiv" style="width:80px;background:#cccccc;padding:3;">
DIV CLICK
</div></br>
<input id="btnButton" type="button" value="Button Click me" /></br></br>
<a href="/" id="btnAnchr">Anchor Tag Click me</a></br></br>
<script type="text/javascript">
$("#btnButton").on('click', function () {
// JQUERY
$(this).attr("disabled", "disabled");
// JavaScript
document.getElementById("btnButton").setAttribute("disabled", "disabled");
console.log("btn clicked ");
});
$("#btnDiv").on('click', function () {
$(this).off('click');
document.getElementById("btnDiv").setAttribute("disabled", "disabled");
console.log("Div clicked ");
});
$("#btnAnchr").on('click', function (e) {
$(this).attr("disabled", "disabled");
e.preventDefault();
});
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo erreichen Sie nicht anklickbare Elemente in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!