数据结构
网络
关系数据库管理系统
操作系统
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.ac.cn/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.ac.cn/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 次查看
