Home >Web Front-end >JS Tutorial >How to achieve unclickable elements in jquery

How to achieve unclickable elements in jquery

藏色散人Original: 2021-01-18 09:06:182534browse

Jquery method to implement unclickable elements: first add a button tag, a div tag and an anchor tag; then implement it through the "$(this).attr("disabled", "disabled");" method Just specify that the tag is disabled.

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.

Recommended: jQuery Video Tutorial

In many cases, based on certain conditions and after performing certain actions, we need to set the HTML button or input tag to Disable or remove it from the web page. If you are looking for a way to make any button unclickable i.e. disable the button using jquery then you are in the right place.

For example, when a click on a button calls the jquery ajax function until its response arrives, we need to disable the button (not clickable). It's a good practice to disable the button so that users don't press it again and again.

In this article it will be explained how to disable any button, whether it is Button tag, anchor tag or div, li element.

HTML tags: add button, div, and a tag

Here we add a button tag, a div tag, and an anchor tag. Once clicked, we want to make it unclickable (disabled).

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

Explanation of the above code: When the button or div is clicked, the label is immediately disabled (not clickable).

Full 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(&#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>

The above is the detailed content of How to achieve unclickable elements in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how JavaScript reduces function complexityNext article：Detailed explanation of how JavaScript reduces function complexity

See more

How to achieve unclickable elements in jquery

Related articles