資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 jQuery 中查詢所有停用的元素？
概述
停用的元素是指終端使用者無法使用的元素。這些元素使用“disable”屬性停用。因此，使用 JQuery 庫，我們可以在 HTML 頁面中找到所有停用的元素總數。使用 Jquery 選擇器，我們可以透過傳遞“:disabled”偽選擇器來查詢所有停用的元素。“:disabled”選擇器將以自上而下的方式選擇所有元素。此方法將掃描所有停用的屬性並將其列在一個變數中。
語法
此方法中使用的語法為：
$(":disabled").each(function () {
list += $(this).attr("id")+" ";
});
:disabled − “:disabled”術語是一個偽類，它選擇位於 HTML 中的所有停用屬性元素。
forEach − 在上述語法中，each 是一個函式，用於迭代包含所有停用屬性元素的變數。
this − 在上述語法中，“this”是一個關鍵字，表示當前標籤元素。
attr() − 這是一個 Jquery 方法，它返回作為引數傳遞的屬性值。
演算法
步驟 1 − 在您的文字編輯器中建立一個名為 index.html 的檔案，並在其中新增 HTML 基本結構。
步驟 2 − 現在將 Jquery CDN（內容分發網路）連結新增到檔案的 head 標籤中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
步驟 3 − 現在建立一個父容器以建立表單模板。
<div id="form"></div>
步驟 4 − 現在向表單容器中新增一些輸入標籤，併為其分別新增 id 名稱或類名稱，並向一些輸入標籤新增 disabled 屬性。
<input type="text" id="text" placeholder="write your name"><br> <select id="dropdown" disabled> <option>Frontend</option> <option>Backend</option> <option>DSA</option> </select><br> <input type="date" id="date" disabled><br> <input type="file" id="fileUpload" disabled><br>
步驟 5 − 現在在表單內建立一個按鈕以提交。
<button class="submit" itemid="Button">Submit</button>
步驟 6 − 現在將 script 標籤新增到頁面的 body 中。
<script></script>
步驟 7 − 現在使用 Jquery 選擇器標籤透過提交按鈕觸發函式。
$('.submit').click(() => {})
步驟 8 − 現在建立一個空變數以儲存停用屬性。
var list = "";
步驟 9 − 現在使用“:disabled”偽類更改停用元素的樣式。
$(':disabled').css({
"border": "2px dashed black",
"background": "#5050505c"
});
步驟 10 − 現在使用“:disabled”選擇器迭代並獲取所有停用的元素作為彈出視窗。
$(":disabled").each(function () {
list += $(this).attr("id")+" ";
});
alert(list)
步驟 11 − 當用戶單擊表單時，它將彈出停用元素。
示例
在此示例中，我們將建立一個示例 HTML 表單以查詢所有停用的元素，為此，我們將建立一個帶有 Jquery 選擇器的 JQuery 箭頭函式，該函式將觸發其餘函式以查詢停用的元素。由於“:disabled”選擇器會選擇所有停用屬性的元素，因此我們還必須將這些元素顯示給使用者，為此，我們已迭代“:disabled”選擇器並將結果儲存在一個變數中，並將其警示給使用者。
<html>
<head>
<title> find all the disabled elements </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<style>
input {
margin: 0.5rem 0;
}
</style>
</head>
<body>
<div id="form">
<input type="text" id="text" placeholder="write your name"><br>
<select id="dropdown" disabled>
<option>Frontend</option>
<option>Backend</option>
<option>DSA</option>
</select><br>
<input type="date" id="date" disabled><br>
<input type="file" id="fileUpload" disabled><br>
<button class="submit" itemid="Button">Submit</button>
</div>
<script>
$('.submit').click(() => {
$(':disabled').css({
"border": "2px solid black",
"background": "#5050505c"
});
list = "";
$(":disabled").each(function () {
list += $(this).attr("id")+" ";
});
alert(list)
})
</script>
</body>
</html>
下圖顯示了上述功能的輸出視窗，該視窗顯示了供使用者填寫其詳細資訊的表單。因此，在上述表單中，當用戶填寫其詳細資訊並提交時，他將收到一個彈出通知，其中包含停用元素列表。
結論
使用者可以輕鬆地識別停用的輸入和按鈕，因為它可以用褪色的顏色和褪色的文字顯示。但有時可能會停用元素，例如，在選舉表單中，我們可以輸入一些關於個人個人詳細資訊的有意義的條目，因此，與其讓所有使用者都能使用這些條目，不如將它們停用，只允許 18 歲以上使用者使用。在這種情況下，上述功能可以幫助開發人員。在上面的程式中，“this”關鍵字在顯示停用元素方面發揮著重要作用，因為它獲取儲存在變數中的當前停用元素。
974 次檢視
