每日学习的代码整理——用JS实现阅读完全部协议之后才允许注册_注册时需要勾选用户协议,只有同意了才能注册,这个功能代码如何写-CSDN博客

本文链接：https://blog.csdn.net/csdn_ggy/article/details/128447307

<!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>
    <style>
        #info {
            height: 300px;
            width: 250px;
            overflow: auto;
            background-color: #bfa;
        }
    </style>
    <script>
        window.onload = function () {
            // 获取ID名为info的元素
            var info = document.getElementById("info");
            // 获取input元素
            var input = document.getElementsByTagName("input");
            // 为滚动条绑定一个触发事件。
            info.onscroll = function () {
                // 判断滚动条是否滚到了最下面
               // 如果（滚动区域的高度-垂直滚动条滚动的距离 = 可见的高度），则滚动条到最下面
                if (info.scrollHeight - info.scrollTop == info.clientHeight) {
                    // 将input的disabled的值设置为false。
                    input[0].disabled = false;
                    input[1].disabled = false;
                }
            };

        };
    </script>
</head>

<body>
    <form action="">
        <h3>请阅读协议，然后完成注册</h3>
        <p id="info">
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
        </p>
        <input type="checkbox" disabled="true">我已仔细阅读，同意。
        <input type="submit" value="注册" disabled="true">
    </form>

</body>

</html>