<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 禁用和启用表单元素 </title>
行内属性：disabled
它不用给属性值，它只有两种状态：有，或者 没有。 有就代表禁用， 没有就代表启用
跟它类似的属性：
checked
selected
</head>
<body>
<input type="text">
<input type="radio">
<input type="checkbox">
<input type="button" value="确认">
<hr>
<button class="jinyong">禁用</button>
<button class="qiyong">启用</button>
一个按钮实现禁用和启用表单元素
<button class="jinjie">进阶禁用</button>
<script>
// 找到所有表单元素
var inList = document.getElementsByTagName('input');
// 禁用的点击事件
document.getElementsByClassName('jinyong')[0].onclick = function () {
for (var i = 0; i < inList.length; i++) {
inList[i].disabled = true;
}
};
//启用的点击事件
document.getElementsByClassName('qiyong')[0].onclick = function () {
for (var i = 0; i < inList.length; i++) {
inList[i].disabled = false;
}
}
// 一个按钮实现禁用和启用表单元素
// 禁用的点击事件
document.getElementsByClassName('jinjie')[0].onclick = function() {
for (var i = 0 ;i < inList.length; i++){
// 给true代表加上disabled属性
inList[i].disabled = this.innerText == "进阶禁用" ? true : false;
}
this.innerText = this.innerText == "进阶禁用" ?"进阶启用" : "进阶禁用";
}
</script>
</body>
</html>
网友评论