在许多情况下,基于某些条件并在执行某些操作后,我们需要将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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)