按钮禁用表单事件
需求分析：
1.点击启用：设置所有的表单元素distabled属性false
2.点击禁用：设置所有的表单元素distabled属性true
思路分析：事件三要素
1 获取元素：
2 注册事件：
3 事件处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件案例 - 表单禁用与启用</title>
</head>
<body>
用户名: <input type="text" /><br />
密码: <input type="password" /><br />
性别: <input type="radio" name="gender" />男<input type="radio" name="gender" />女<br />
爱好: <input type="checkbox" name="hobby" /> 敲代码<input type="checkbox" name="hobby" /> 看视频 <input type="checkbox" name="hobby" /> 找bug
<hr />
<button class="stop">禁用</button><button class="start">启用</button>
</body>
<script>
// 核心技术:disabled属性
// 1.获取事件源:启用与禁用按钮
// 2.确定事件类型:点击
// 3.事件处理
// 获取所有的input元素
const inputs = document.querySelectorAll("input");
// 点击事件 - 禁用
document.querySelector(".stop").onclick = function () {
// console.log(this);
// 遍历
inputs.forEach(function (item) {
console.log(item);
item.disabled = true;
});
};
// 点击事件 - 启用
document.querySelector(".start").onclick = function () {
inputs.forEach(function (item) {
item.disabled = false;
});
};
</script>
</html>
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
