js 实现必须勾选复选框才能点击按钮或超链接(危险操作再确认)
[編輯] [转简体] (简体译文)
|
作者:huidong
| 分類:【編程】HTML/JavaScript
[
34 瀏覽
0 評論
4 贊
4 踩
]
概要
正文
index.html
<head> <!-- 开始 | 加载 confirm_option 相关函数 --> <script src="./js/confirm_option.js"></script> <link href="./css/confirm_option.css" media="all" rev="stylesheet" rel="stylesheet" type="text/css" /> <!-- 结束 | 加载 confirm_option 相关函数 --> </head> <body> <form method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required/> <!-- 确认选项 --> <input type="checkbox" id="checkbox_confirm"/> <label for="checkbox_confirm">确认继续操作</label> <!-- 危险操作的按钮 --> <button type="submit" id="btn_operation">执行危险操作</button> <!-- 危险操作的超链接 --> <a id="link_operation" href="http://www.huidong.xyz">执行危险操作的链接</a> <script> BindConfirmOption_Button("checkbox_confirm", "btn_operation"); BindConfirmOption_Link("checkbox_confirm", "link_operation"); </script> </form> </body>
confirm_option.js
/** * 实现 再次确认复选框 的相关函数 * 在 HTML 文件中可以在按钮或超链接之后加一个 js 语句调用本文件中的函数 * (超链接的效果需要结合相应 css 文件使用才有效果) * * 下列函数都是将 checkbox 和 button 或者 <a> 绑定在一起,只有勾选了相应复选框,才能点击相应的按钮或超链接 * 函数传入复选框元素 id 和 按钮或超链接 元素 id * * by huidong 2024.6.13 */ function BindConfirmOption_Button(checkbox_id, btn_id) { // 监听复选框的变化 document.getElementById(checkbox_id).addEventListener("change", function() { var button = document.getElementById(btn_id); if (this.checked) { button.disabled = false; } else { button.disabled = true; } }); // 初始禁用按钮 var button = document.getElementById(btn_id); button.disabled = true; } function BindConfirmOption_Link(checkbox_id, link_id) { // 监听复选框的变化 document.getElementById(checkbox_id).addEventListener("change", function() { var link = document.getElementById(link_id); if (this.checked) { link.classList.remove("disabled-link"); link.classList.add("enabled-link"); } else { link.classList.remove("enabled-link"); link.classList.add("disabled-link"); } }); // 初始状态设为不可点击 var link = document.getElementById(link_id); link.classList.add("disabled-link"); }
confirm_option.css
/** * 实现 再次确认复选框 的相关函数所需要使用的 css 样式 * 主要是提供超链接的禁用和启用样式 * by huidong 2024.6.13 */ /* 默认样式,将链接显示为灰色文本,且不可点击 */ .disabled-link { color: gray; text-decoration: none; pointer-events: none; cursor: default; } /* 勾选复选框后的样式,将链接显示为正常超链接文本,且可点击 */ .enabled-link { color: revert; text-decoration: underline; pointer-events: auto; cursor: pointer; }