javascript设置按钮禁用,javascript原生加JQ两种方法

春季是一个富有生命力季节,也是一个美丽、神奇,充满希望季节。都说春季是花海洋。粉色淡雅,白色端庄,红色热烈,紫色深情,泼泼洒洒,浓浓烈烈。一朵朵花,把春季朝气蓬勃都开出来了。

网页设计时,如果遇到数据提交或一些其它功能的触发,为了防止用户重复点击。我们就需要让用户在点击某个按钮后,让按钮处于禁用不可点击的存在。今天这篇文章就说说,在利用js和JQ两种方法,使按钮被点击一次后处于禁用状态。

js设置按钮禁用,js和jquery设置disabled属性为true使按钮失效

原生JS禁用按钮代码

HTML代码

<input type="button" value="点我点我" onclick="dis()"  id="mochu">

javascript代码

<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’属性

以上就是javascript设置按钮禁用,javascript原生加JQ两种方法。人生旅途一场,总要逼自己一下吧,哪有什么年少轻狂,不过是年少有梦,梦总是要去追一下的吧。更多关于javascript设置按钮禁用,javascript原生加JQ两种方法请关注haodaima.com其它相关文章!