Maison  >  Article  >  interface Web  >  Comment obtenir des éléments non cliquables dans jquery

Comment obtenir des éléments non cliquables dans jquery

藏色散人
藏色散人original
2021-01-18 09:06:182518parcourir

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();
});

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>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn