匯東網


js 实现必须勾选复选框才能点击按钮或超链接(危险操作再确认)

[編輯] [转简体]
|
作者:huidong | 分類:【編程】HTML/JavaScript
[ 52 瀏覽 0 評論 11 贊 9 踩 ]

概要

正文

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


[ 11] [ 9]


 評論區  0 條評論

+ 添加評論