Beispiel für einen deaktivierten JQuery-Selektor

Der deaktivierte JQuery-Selektor wählt alle deaktivierten Elemente im Formular aus. Um alle Elemente im Formular auszuwählen, verwenden wir standardmäßig „:disabled“. Wir können die Elemente jedoch filtern, indem wir den Komponentennamen oder -typ voranstellen, z. B. „input:disabled“, „select:disabled“ usw. Der Attributselektor „disabled“ ist ein boolesches Attribut, wobei der Wert „true“ angibt, dass das Element deaktiviert ist, und der Wert „false“, dass das Element nicht deaktiviert ist.

Das Disabled-Attribut kann im -Element verwendet werden. Wir können im Eingabeelement „disabled=“disabled“ schreiben. Die deaktivierten Elemente werden nicht in einem Formular übermittelt. Betrachten Sie beispielsweise eine Zeile mit dem deaktivierten Attribut . Wenn wir „disabled“ schreiben, bedeutet dies, dass das Eingabefeld deaktiviert ist und keine Operation für dieses Element ausgeführt werden kann. Der deaktivierte Selektor, der von einigen HTML-Elementen wie Button-, Select-, Div-, Option-, Input- und Textarea-Elementen unterstützt wird.

JQuery deaktivierte Selektorsyntax

$(“:disabled”)

Beispiel für einen deaktivierten JQuery-Selektor

<!doctype html>
<head>
<title>JQuery Disabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Disabled Selector Example</h2>
<style>
.test
{
color:green;
}
div
{
background:lightblue;
}
</style>
<script>
   $(document).ready(function(){
        $("#Disable").click(function(){
  	  $(".myexample *").prop('disabled',true);
   	});
	$("input:disabled").css("border-color", "red");
   });
</script>
<body>
<form>
Name:<input type="text" name="uname"   disabled="disabled" value="This is disabled textbox"><br>
Password:<input type="password" name="pwd"><br><br>
<input type="submit" value="Submit"   disabled="disabled">
</form><br><br>

<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"/>
</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.
  • Die Zeile $(“#Disable”).click(function()) definiert die Klickmethode, die ausgeführt wird, wenn auf ein Element geklickt wird, das das id-Attribut des Eingabeelements verwendet.
  • $(“.myexample *“).prop(‚disabled‘,true); Zeile setzt die Eigenschaft „disabled“ auf „true“. Der wahre Wert definiert, dass das Element nach dem Klicken auf das Schaltflächenelement deaktiviert wird. Das myexample * ist die Klasse des div-Elements, die alle div-Elemente durch die Verwendung des *-Symbols auf der Webseite deaktiviert.
  • $(„input:disabled“).css(“border-color“, „red“); Zeile definiert den Disabled-Selektor, der alle Elemente des Typs Disabled auswählt und Eingabe-HTML-Elemente verwendet, die das Disabled-Attribut unterstützen.
  • Wenn wir das obige Skript ausführen, erhalten wir zwei Eingabetypelemente. Eines ist deaktiviert und das zweite ist aktiviert, und die Schaltfläche wird ebenfalls als deaktiviert angezeigt. Die deaktivierten Elemente werden mit grünem Text und rotem Farbrand angezeigt, wie im Eingabeelement- und CSS-Klassentest angegeben. Im Browser wird eine Schaltfläche angezeigt. Wenn wir auf diese Schaltfläche klicken, werden alle Elemente deaktiviert, die unter dem div-Element definiert sind.

Demo zum deaktivierten JQuery-Selektor

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie die JQuery Disabled Selector-Demo aus

Beispiel für einen deaktivierten JQuery-Selektor

Es ist auch möglich, die Select- und Textarea-Elemente mithilfe des div-Elements zu deaktivieren. Das folgende Beispiel zeigt, wie die Elemente „select“ und „textarea“ deaktiviert werden.

<!doctype html>
<head>
<title>JQuery Disabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Disabled Selector Example</h2>
<style>
div
{
background:lightgray;
}
</style>
<script>
    $(document).ready(function(){
	$("#mydiv").find("select,textarea").prop('disabled',true);
   });
</script>
<body>
<div id="mydiv">
    <textarea>This is disabled</textarea><br>
    <select>
       <option>Item1</option>
       <option>Item2</option>
       <option>Item3</option>
    </select>
</div>
</body>
</html>

Die obigen Skripte spezifizieren die Deaktivierung von Select- und Textarea-Elementen. Die Methode find() gibt Nachkommenelemente ausgewählter Elemente im Satz übereinstimmender Elemente zurück. Die Methode prop gibt Eigenschaften und Werte der ausgewählten Elemente zurück. Wenn wir das Skript ausführen, wählt die Methode „find“ Elemente anhand der ID des Elements „div“ aus und die Methode „prop“ definiert die Eigenschaft „disable“ mit dem Wert „true“. Wenn sie „true“ ist, werden alle Elemente auf der Webseite deaktiviert, und wenn sie auf „false“ gesetzt ist , dann werden alle Elemente aktiviert.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie JQuery Disabled Selector mit Div Demo aus

DisabledSelector2Picture

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen