jquery如何實作不能點擊元素
- 藏色散人原創
- 2021-01-18 09:06:182497瀏覽
jquery實作不能點擊元素的方法：先新增一個按鈕標籤、一個div標籤和一個錨標籤；然後透過「$(this).attr("disabled", "disabled");」方法實現指定標籤已禁用即可。
本教學操作環境：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('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();
});上述程式碼解釋：點擊按鈕或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('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>以上是jquery如何實作不能點擊元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn