如何在 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 标签添加到页面正文。
<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"关键字在显示禁用元素方面起着重要作用，因为它会获取存储在变量中的当前禁用元素。
