<style>
button {
width: 200px;
height: 30px;
background-color: #72b134;
color: white;
border: none;
border-radius: 4px;
}
/* 伪类选择器 鼠标按下时激活 */
button:active {
opacity: 0.8;
}
/* disable 元素不可用 */
button:disabled {
background-color: #ccc;
}
</style>
</head>
<body>
<label>
<input type="checkbox" />
<span>我已阅读并同意用户注册协议</span>
<br />
<button disabled>提交注册</button>
</label>
<script>
// 监听勾选框的变更 读取状态的值 读取其是否勾选 修改按钮的不可用状态
// 获取属性 属性选择器
const checkbox = document.querySelector("[type=checkbox]");
checkbox.onchange = function () {
const btn = document.querySelector("button");
// 勾选 真 不可用 假
// 勾选 假 不可用 真
btn.disabled = !this.checked;
};
</script>
</body>
扫一扫
09-11
270
270
09-13
219
219
09-12
299
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
