网页设计时,如果遇到数据提交或一些其它功能的触发,为了防止用户重复点击。我们就需要让用户在点击某个按钮后,让按钮处于禁用不可点击的存在。今天这篇文章就说说,在利用js和JQ两种方法,使按钮被点击一次后处于禁用状态。
原生JS禁用按钮代码
HTML代码
<input type="button" value="点我点我" onclick="dis()" id="mochu">
<script> function dis(){ //免费资源网 var but = document.getElementById('mochu').disabled = true; } </script>
这段代码的实现原理很简单,直接将按钮元素的‘disabled’属性的值改为‘true’即可。简单方便
注意,html代码中的 'onclick' 方法,直接调用定义好的函数。
利用jq禁用按钮的代码
html代码
<input type="button" value="点我点我" id="mochu">
JQ代码
<script> $('#mochu').click(function(){ $(this).attr("disabled", "disabled"); }); </script>
注意:
1、使用此代码前要引入jquery库,不然js代码无法运行
2、此示例中的html代码与上个事例中的html代码有所不同,此事件没有 'onclick' 方法
3、JQ原来就是给元素添加‘disabled’属性