jqueryでクリックできない要素を実現する方法-jsチュートリアル-php.cn

jqueryでクリックできない要素を実現する方法

藏色散人

リリース： 2022-12-30 11:11:58

オリジナル

2520 人が閲覧しました

クリックできない要素を実装するための Jquery メソッド: まずボタンタグ、div タグ、アンカータグを追加し、次に「$(this).attr("disabled", "disabled");」を通じて実装します。メソッドタグが無効であることを指定するだけです。

jqueryでクリックできない要素を実現する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、Dell G3 コンピューター。

推奨: jQuery ビデオチュートリアル

多くの場合、特定の条件に基づいて、特定のアクションを実行した後、HTML ボタンまたは入力タグを無効または無効に設定する必要があります。 Web ページから削除してください。ボタンをクリックできないようにする方法、つまり 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>

ログイン後にコピー

以上がjqueryでクリックできない要素を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。