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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
图解javascript作用域链
May 27 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
原生js实现随机点名
Jul 05 Javascript
webpack的移动端适配方案小结
Jul 25 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
php数组冒泡排序算法实例
2016/05/06 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
python format 格式化输出方法
2018/07/16 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
对Python函数设计规范详解
2019/07/19 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python tornado上传文件的功能
2020/03/26 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
Django框架请求生命周期实现原理
2020/11/13 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
精细化工应届生求职信
2013/11/17 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
社区创先争优承诺书
2014/08/30 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python