jquery怎么實(shí)現(xiàn)不能點(diǎn)擊元素

發(fā)布時(shí)間：2021-01-18 09:52:39 來(lái)源：億速云閱讀：362 作者：小新欄目：web開發(fā)

小編給大家分享一下jquery怎么實(shí)現(xiàn)不能點(diǎn)擊元素，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

jquery實(shí)現(xiàn)不能點(diǎn)擊元素的方法：首先添加一個(gè)按鈕標(biāo)簽、一個(gè)div標(biāo)簽和一個(gè)錨標(biāo)簽；然后通過(guò)“$(this).attr("disabled", "disabled");”方法實(shí)現(xiàn)指定標(biāo)簽被禁用即可。

在許多情況下，基于某些條件并在執(zhí)行某些操作后，我們需要將HTML按鈕或輸入標(biāo)記設(shè)置為禁用或?qū)⑵鋸木W(wǎng)頁(yè)中刪除。如果您正在尋找一種方法來(lái)使任何按鈕不可點(diǎn)擊，即使用jquery禁用按鈕，那么您來(lái)對(duì)了地方。

例如，在按鈕上單擊調(diào)用jquery ajax函數(shù)直到其響應(yīng)到來(lái)時(shí)，我們需要禁用該按鈕（不可單擊）。將該按鈕禁用以便用戶不會(huì)一次又一次地按下該按鈕是一種很好的做法。

在這篇文章中將解釋如何禁用任何按鈕，無(wú)論是Button標(biāo)簽，錨標(biāo)簽還是div，li元素。

HTML標(biāo)記：添加按鈕，div，一個(gè)標(biāo)簽

這里我們添加一個(gè)按鈕標(biāo)簽，一個(gè)div標(biāo)簽和一個(gè)錨標(biāo)簽。點(diǎn)擊后，我們想讓它不可點(diǎn)擊（禁用）。

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

上述代碼解釋：當(dāng)點(diǎn)擊按鈕或div后，該標(biāo)簽立即被禁用（不可點(diǎn)擊）。

完整代碼：

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<br>
請(qǐng)用Chrome或Firefox瀏覽器訪問(wèn)該網(wǎng)頁(yè)，按F12打開控制臺(tái)(console)，
然后點(diǎn)擊下面的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('click', function () {
  // JQUERY
  $(this).attr("disabled", "disabled");
  // JavaScript
  document.getElementById("btnButton").setAttribute("disabled", "disabled");
  console.log("btn clicked ");
});
$("#btnDiv").on('click', function () {
  $(this).off('click');
  document.getElementById("btnDiv").setAttribute("disabled", "disabled");
  console.log("Div clicked ");
});
$("#btnAnchr").on('click', function (e) {
  $(this).attr("disabled", "disabled");
  e.preventDefault();
});
</script>
</body>
</html>

看完了這篇文章，相信你對(duì)“jquery怎么實(shí)現(xiàn)不能點(diǎn)擊元素”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

jquery怎么實(shí)現(xiàn)不能點(diǎn)擊元素

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽