关于js里面表单disabled属性使用

最新推荐文章于 2024-04-28 21:58:33 发布

Ali_nie

最新推荐文章于 2024-04-28 21:58:33 发布

阅读量1.9w

点赞数 9

分类专栏：工具文章标签： disabled disabled属性输入框禁止按钮禁止

本文链接：https://blog.csdn.net/Ali_nie/article/details/93467970

版权

工具专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天在项目中无意发现在静态文件中的代码为

<input id="start_btn" type="button" value="启动" onclick="start()" >

随着项目的启动，后台拿来数据html页面代码变成

<input id="start_btn" type="button" value="启动" onclick="start()" disabled>

查阅js方法，发现是一句判断

function fun(){
		var t = document.getElementById('t').value;
		console.log(t);
		if(t == 1){
			document.getElementById("btn").disabled=false;
		} else{
			document.getElementById("btn").disabled=true;
		}	
	}

方法为页面初始化触发事件，故做了一下测试，探索`disabled`属性的作用

在这里插入图片描述

测试代码

<!DOCTYPE html>
<html>
<head>
	<title>xxx</title>
</head>
<body>
	<input type="text" name="t" id="t" />
	<input type="button" id="btn" name="btn" value="按钮" />
	<input type="button" id="btn1" onclick="fun()" name="btn" value="按钮1" />
</body>
<script type="text/javascript">
	function fun(){
		var t = document.getElementById('t').value;
		console.log(t);
		if(t == 1){
			document.getElementById("btn").disabled=false;
		} else{
			document.getElementById("btn").disabled=true;
		}
		
	}
	
</script>
</html>

效果：在页面加载后，`按钮`和`按钮1`均处于可点击状态。当在input框中输入`1`时点击`按钮1`，`按钮`依旧可以点击。当输入`非1`时，点击`按钮1`，`按钮`处于不可点击状态。而当`按钮`处于不可点击状态时，再次输入`1`，点击`按钮1`，`按钮`重新恢复可点击状态。

故得出结论

- js添加disabled属性时，document.getElementById("btn").disabled=false，表示不添加disabled属性；
- document.getElementById("btn").disabled=true 为标签添加disabled属性；
- 当标签为<input type="button" id="btn" name="btn" value="按钮" disabled="true/false"/>时，均为不可点击

Ali_nie

关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
关于js里面表单disabled属性使用

今天在项目中无意发现在静态文件中的代码为<input id="start_btn" type="button" value="启动" onclick="start()" >随着项目的启动，后台拿来数据html页面代码变成<input id="start_btn" type="button" value="启动" onclick="start()" disabled>...
复制链接

扫一扫