javascript实现用户必须勾选协议实例讲解

在js中设置用户必须阅读完某项协议 才能勾选登陆或注册 (disabled的使用技巧)

Posted in Javascript onMarch 24, 2021

仔细观看两张图片画圈部分是不一样的

当滚轮在上面时下面的表单是不可选中的

第二张在底部表单是可选中的


javascript实现用户必须勾选协议实例讲解javascript实现用户必须勾选协议实例讲解

其中方法为为监听这个滚轮,当滚轮到达底部时 表单变为可选中状态

info.scrollHeight - info.scrollTop == info.clientHeight //判断滚条是否到达了底部<br type="_moz">
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #info{
                width: 200px;
                height: 500px;
                background-color: #00FFFF;
                overflow:auto;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                /*
                 *垂直滚动条到底时表单项可用
                 * onscroll
                 * 该事件会在滚动条滚动时触发    
                 * */
                 var info = document.getElementById("info");
                 var inputs = document.getElementsByTagName("input");
                 info.onscroll = function(){
                    //检查滚动条是否滚动到底了
                    if(info.scrollHeight - info.scrollTop == info.clientHeight){
                        //滚动条到底表单项可用
                        inputs[0].disabled = false;
                        inputs[1].disabled = false;
                    }
                 }
            }
        </script>
        <title></title>
    </head>
    <body>
        <h1>欢迎新用户注册</h1>
        <p id="info">亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
        亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册</p>
        <input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔细阅读协议,一定遵守
        <input type="submit" value="注册" disabled="disabled"/><!-- 如果为表单添加disabled="disabled则表单项将变成不可用的状态-->
    </body>
</html>

这个方法在chrome中不适用,其它浏览器均可。

Javascript 相关文章推荐
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
子页向父页传值示例
Nov 27 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
Angularjs 基础入门
Dec 26 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
全面分析JavaScript 继承
May 30 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
JavaScript实现前端网页版倒计时
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
jQuery treeview树形结构应用
Mar 24 #jQuery
js实现弹框效果
Mar 24 #Javascript
vue实现倒计时功能
Mar 24 #Vue.js
Ajax实现页面无刷新留言效果
You might like
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
文科教师毕业的自我评价
2014/01/16 职场文书
美术教师自我鉴定
2014/02/12 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
出租房屋协议书
2014/09/14 职场文书
怒海潜将观后感
2015/06/11 职场文书
队列队形口号
2015/12/25 职场文书
入党申请书怎么写?
2019/06/11 职场文书
python本地文件服务器实例教程
2021/05/02 Python