Rumah > Artikel > hujung hadapan web > jquery如何实现不能点击元素

jquery如何实现不能点击元素

藏色散人asal: 2021-01-18 09:06:182502semak imbas

jquery实现不能点击元素的方法：首先添加一个按钮标签、一个div标签和一个锚标签；然后通过“$(this).attr("disabled", "disabled");”方法实现指定标签被禁用即可。

jquery如何实现不能点击元素

本教程操作环境：windows7系统、jquery1.10.0版本、Dell G3电脑。

推荐：jQuery视频教程

在许多情况下，基于某些条件并在执行某些操作后，我们需要将HTML按钮或输入标记设置为禁用或将其从网页中删除。如果您正在寻找一种方法来使任何按钮不可点击，即使用jquery禁用按钮，那么您来对了地方。

例如，在按钮上单击调用jquery ajax函数直到其响应到来时，我们需要禁用该按钮（不可单击）。将该按钮禁用以便用户不会一次又一次地按下该按钮是一种很好的做法。

在这篇文章中将解释如何禁用任何按钮，无论是Button标签，锚标签还是div，li元素。

HTML标记：添加按钮，div，一个标签

这里我们添加一个按钮标签，一个div标签和一个锚标签。点击后，我们想让它不可点击（禁用）。

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

上述代码解释：当点击按钮或div后，该标签立即被禁用（不可点击）。

完整代码：

<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>

Atas ialah kandungan terperinci jquery如何实现不能点击元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：详解JavaScript降低函数复杂度的方法Artikel seterusnya：jquery查找元素是否存在

Artikel berkaitan

Lihat lagi