javascript實現使用者必須勾選協議例項講解
阿新 • • 發佈：2021-03-23
在js中設定使用者必須閱讀完某項協議 才能勾選登陸或註冊 （disabled的使用技巧）
仔細觀看兩張圖片畫圈部分是不一樣的
當滾輪在上面時下面的表單是不可選中的
第二張在底部表單是可選中的
其中方法為為監聽這個滾輪，當滾輪到達底部時 表單變為可選中狀態
info.scrollHeight - info.scrollTop == info.clientHeight //判斷滾條是否到達了底部
<!DOCTYPE html> <html> <head> <meta c程式設計客棧harset="utf-8"> <style type="text/css"> #info{ width: 200px; height: 500p程式設計客棧x; background-color: #00FFFF; overflow:auto; } </style> <script type="text/javascript"> window.onload = function(){ /* *垂直滾動條到底http://www.cppcns.com時表單項可用 * 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">親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 http://www.cppcns.com親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親www.cppcns.com愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協議如果不仔細你將不能成功註冊</p> <input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔細閱讀協議,一定遵守 <input type="submit" value="註冊" disabled="disabled"/><!-- 如果為表單新增disabled="disabled則表單項將變成不可用的狀態--> </body> </html>
這個方法在chrome中不適用，其它瀏覽器均可
到此這篇關於javascript實現使用者必須勾選協議例項講解的文章就介紹到這了,更多相關javascript實現使用者必須勾選協議內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！