Comment obtenir des éléments non cliquables dans jquery-js tutoriel-php.cn

Comment obtenir des éléments non cliquables dans jquery

藏色散人

Libérer： 2022-12-30 11:11:58

original

2523 Les gens l'ont consulté

Comment implémenter des éléments non cliquables dans jquery : ajoutez d'abord une balise bouton, une balise div et une balise d'ancrage ; puis implémentez-la via "$(this).attr("disabled", "disabled" );" méthode Précisez simplement que la balise est désactivée.

Comment obtenir des éléments non cliquables dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.0, ordinateur Dell G3.

Recommandé : Tutoriel vidéo jQuery

Dans de nombreux cas, en fonction de certaines conditions et après avoir effectué certaines actions, nous devons définir le bouton HTML ou la balise d'entrée sur Désactiver ou supprimez-le de la page Web. Si vous cherchez un moyen de rendre n'importe quel bouton non cliquable, c'est-à-dire désactiver le bouton à l'aide de jquery, alors vous êtes au bon endroit.

Par exemple, lorsqu'un clic sur un bouton appelle une fonction jquery ajax jusqu'à ce que sa réponse arrive, nous devons désactiver le bouton (non cliquable). C'est une bonne pratique de désactiver le bouton afin que les utilisateurs n'appuient pas dessus encore et encore.

Dans cet article, il sera expliqué comment désactiver n'importe quel bouton, qu'il s'agisse d'une balise Button, d'une balise d'ancrage ou d'un élément div, li.

Balises HTML : ajouter un bouton, un div, une balise

Ici, nous ajoutons une balise bouton, une balise div et une balise ancre. Une fois cliqué, nous voulons le rendre non cliquable (désactivé).

<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(&#39;click&#39;, function () {
  // JQUERY
  $(this).attr("disabled", "disabled");
  // JavaScript
  document.getElementById("btnButton").setAttribute("disabled", "disabled");
  console.log("btn clicked");
});
$("#btnDiv").on(&#39;click&#39;, function () {
  $(this).off(&#39;click&#39;);
  document.getElementById("btnDiv").setAttribute("disabled", "disabled");
  console.log("Div clicked");
});
$("#btnAnchr").on(&#39;click&#39;, function (e) {
  $(this).attr("disabled", "disabled");
  e.preventDefault();
});

Copier après la connexion

Explication du code ci-dessus : Lorsque l'on clique sur le bouton ou le div, le label est immédiatement désactivé (non cliquable).

Code complet :

<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(&#39;click&#39;, function () {
  // JQUERY
  $(this).attr("disabled", "disabled");
  // JavaScript
  document.getElementById("btnButton").setAttribute("disabled", "disabled");
  console.log("btn clicked ");
});
$("#btnDiv").on(&#39;click&#39;, function () {
  $(this).off(&#39;click&#39;);
  document.getElementById("btnDiv").setAttribute("disabled", "disabled");
  console.log("Div clicked ");
});
$("#btnAnchr").on(&#39;click&#39;, function (e) {
  $(this).attr("disabled", "disabled");
  e.preventDefault();
});
</script>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!