Es wählt alle aktivierten Elemente im Formular aus. Im Allgemeinen ermöglicht es die Aktivierung von Vorgängen an Elementen wie Eingabetextelementen, Schaltflächenelementen usw. im Dokument. Es wird empfohlen, dass es mit dem Tag-Namen beginnt, andernfalls wählt es standardmäßig alle Elemente im Formular aus, indem es den Standardtyp „:enabled“ verwendet. Es wird häufig für Formularelemente verwendet. Es stellt die Elemente dar, die sich in einem aktivierten Zustand befinden. Solche Elemente haben einen entsprechenden deaktivierten Zustand, in dem sie nicht aktiviert werden können oder Eingaben akzeptieren. Der aktivierte Selektor stimmt mit jedem Element im Dokument überein. Es kann mit einigen HTML-Elementen wie Button-, Select-, Option-, Input- und Textarea-Elementen verwendet werden.
JQuery-fähige Selektorsyntax
$(“:enabled”)
Es gibt den aktivierten Status an, der alle aktivierten Elemente im Dokument auswählt.
Beispiel für einen JQuery-aktivierten Selektor
<!doctype html>
<head>
<title>JQuery Enabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Enabled Selector Example</h2>
<style>
.myval
{
color:green;
}
</style>
<script>
$(document).ready(function(){
$("input:enabled").css("border-color", "orange");
});
</script>
<body>
<form>
Name:<input type="text" name="uname" placeholder="This is enabled textbox"><br>
Password:<input type="password" name="pwd" disabled="disabled"><br><br>
<input type="submit" value="Submit" >
</form>
</body>
</html>
- Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
- $(„input:enabled“).css(“border-color“, „orange“); Zeile definiert den aktivierten Selektor, der alle aktivierten Elemente im Dokument darstellt und das Eingabe-HTML-Element verwendet.
- Wenn wir das obige Skript ausführen, erhalten wir zwei Eingabetypelemente, eines mit aktivierter und eines mit deaktivierter und aktivierter Schaltfläche. Die aktivierten Elemente werden mit orangefarbenem Rand und Text mit grüner Farbe angezeigt, die CSS-Eigenschaftsstile verwendet.
JQuery-fähige Selector-Demo
Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:
Es kann auch den aktivierten Selektor mit dem div-Element wie folgt verwenden:
<!doctype html>
<head>
<title>JQuery Enabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Enabled Selector Example</h2>
<style>
.myval
{
color:green;
}
</style>
<script>
$(document).ready(function(){
$("#Disable").click(function(){
$(".myval *").prop('disabled',true);
});
$("#Enable").click(function(){
$(".myval *").prop('disabled',false);
});
});
</script>
<body>
<div >
Fname:<input type="text" placeholder="First Name"/>
Lname:<input type="text" placeholder="Last Name"/>
</div>
<input type="button" id="Disable" value="Disable the Elements"/>
<input type="button" id="Enable" value="Enable the Elements"/>
</body>
</html>
Das obige Skript verwendet die Klasse des div-Elements, das die aktivierte Eigenschaft für die Eingabeelemente festlegt. Die prop-Methode gibt Eigenschaften und Werte der ausgewählten Elemente zurück. Es erhält den Eigenschaftswert für die übereinstimmenden Elemente im Dokument. Das myclass * gibt an, alle Elemente auszuwählen, die unter dem div-Element definiert sind. Wenn die Prop-Methode den Wert „true“ festlegt, deaktiviert sie alle Elemente, andernfalls aktiviert sie alle Elemente im Dokument, wenn sie auf „false“ gesetzt ist.
Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:
Aktivierte Selector-Demo
