javascript實現(xiàn)用戶必須勾選協(xié)議實例講解

更新時間：2021年03月19日 14:17:44 作者：家里有只豬

這篇文章主要介紹了javascript實現(xiàn)用戶必須勾選協(xié)議實例講解,寫頁面的時候經(jīng)常會用到，有感興趣的同學(xué)可以學(xué)習(xí)下

在js中設(shè)置用戶必須閱讀完某項協(xié)議才能勾選登陸或注冊（disabled的使用技巧）

仔細(xì)觀看兩張圖片畫圈部分是不一樣的

當(dāng)滾輪在上面時下面的表單是不可選中的

第二張在底部表單是可選中的

在這里插入圖片描述

其中方法為為監(jiān)聽這個滾輪，當(dāng)滾輪到達(dá)底部時表單變?yōu)榭蛇x中狀態(tài)

info.scrollHeight - info.scrollTop == info.clientHeight //判斷滾條是否到達(dá)了底部

<!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
				 * 該事件會在滾動條滾動時觸發(fā)	
				 * */ 
				 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">親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊
		親愛的用戶請仔細(xì)閱讀一下協(xié)議如果不仔細(xì)你將不能成功注冊</p>
		<input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔細(xì)閱讀協(xié)議,一定遵守
		<input type="submit" value="注冊" disabled="disabled"/><!-- 如果為表單添加disabled="disabled則表單項將變成不可用的狀態(tài)-->
	</body>
</html>

這個方法在chrome中不適用，其它瀏覽器均可

到此這篇關(guān)于javascript實現(xiàn)用戶必須勾選協(xié)議實例講解的文章就介紹到這了,更多相關(guān)javascript實現(xiàn)用戶必須勾選協(xié)議內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: