En este artículo, aprenderemos cómo encontrar todos los elementos en la página que están deshabilitados usando jQuery.
Enfoque: el selector :disabled se puede usar para obtener todos los elementos de la página que están actualmente deshabilitados. Estos elementos se iteran usando el método each() . Luego se puede acceder a los elementos individualmente usando la referencia this dentro de la función del método each().
Se puede seleccionar un tipo particular de elemento especificando el tipo de elemento frente al selector deshabilitado, de lo contrario, todos los elementos en la página se verifican si están deshabilitados. Por ejemplo, el uso de «entrada: deshabilitado» solo seleccionará los elementos deshabilitados que son del tipo de entrada .
Sintaxis:
$(".btn").click(function () {
let disabled_elems = "";
// Get all the disabled elements
$(":disabled").each(function (index) {
// Add a border to the elements
$(this).css("border", "10px red dashed");
// Add the IDs to the list
disabled_elems += "<li>"
+ ($(this).attr("id")) + "</li>";
});
$(".elems").html(disabled_elems);
});
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to find all elements that
are disabled in jQuery?
</b>
<!-- Define some elements with
the disabled attribute -->
<p><b>Inputs</b></p>
<input type="text" id="inp1" disabled />
<br><br>
<input type="text" id="inp2" />
<p><b>Buttons</b></p>
<button type="button" id="btn1">
Enabled Button
</button>
<br><br>
<button type="button" id="btn2" disabled>
Disabled Button
</button>
<p><b>Selects</b></p>
<select id="select1" disabled>
<option value="opt1">Option 1</option>
</select>
<br><br>
<select id="select2">
<option value="opt1">Option 1</option>
</select>
<br>
<p>
Click on the button to mark all
the disabled elements and
get their element ID
</p>
<button class="btn">
Get all disabled elements
</button>
<br><br>
<b>The ids of the disabled elements are:</b>
<ul class="elems"></ul>
<script>
$(".btn").click(function () {
let disabled_elems = "";
// Get all the disabled elements
// using the :disabled selector
$(":disabled").each(function (index) {
// Add a border to the elements
$(this).css(
"border", "10px red dashed"
);
// Add the IDs to the list
disabled_elems += "<li>"
+ ($(this).attr("id")) + "</li>";
});
$(".elems").html(disabled_elems);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA