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;
}