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简单体验
Jan 10 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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 输出简单动态WAP页面
2009/06/09 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
Python简单遍历字典及删除元素的方法
2016/09/18 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python决策树之C4.5算法详解
2017/12/20 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python中如何添加自定义模块
2020/06/09 Python
使用django自带的user做外键的方法
2020/11/30 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
2014年创先争优活动总结
2014/05/04 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android