Das Aktivieren/Deaktivieren einer Schaltfläche mithilfe von jQuery erfordert die Änderung ihrer Funktionalität, um Benutzereingaben entweder zu akzeptieren oder nicht. Dies geschieht normalerweise durch Manipulation der Eigenschaft oder des Attributs „disabled“ über jQuery-Methoden wie „.prop()“ oder „.attr()“.
while-Schleife Java
Um eine Schaltfläche mit jQuery zu aktivieren/deaktivieren, benötigen Sie eine grundlegende HTML-Struktur zusammen mit JavaScript/jQuery. Nachfolgend finden Sie eine einfache Codestruktur, die Ihnen den Einstieg erleichtert
HTML Schaltfläche „Aktivieren/Deaktivieren“Titel><script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>Skript> Kopf> <body> <button id='myButton'>Klicken Sie auf die Schaltfläche „Ich“.<script>$(document).ready(function(){ // jQuery-Code zum Aktivieren/Deaktivieren der Schaltfläche // Fügen Sie hier Ihren Code hinzu }); script> body> html>></pre> </code> <p dir='ltr'> <br></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <h2><span>Beispiele für das Aktivieren/Deaktivieren einer Schaltfläche mithilfe von jQuery</span></h2><h3><span>1. Verwendung der .prop()-Methode:</span></h3><p dir='ltr'><span>Benutzen</span> <span>.prop() in jQuery</span> <span>Um eine Schaltfläche zu aktivieren/deaktivieren, muss ihre Eigenschaft „disabled“ auf „true“ oder „false“ gesetzt werden, was eine effiziente Kontrolle über ihre Interaktivität basierend auf Anwendungsanforderungen und Benutzerinteraktionen ermöglicht.</span></p> <p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>In diesem Beispiel verwenden wir jQuery: Schaltet die Eigenschaft „disabled“ der Schaltfläche bei Klick- und Doppelklickereignissen um, um eine reibungslose Benutzerinteraktion mithilfe der Methode .prop() zu gewährleisten.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>Skript> Kopf> <body> <h3>Verwenden der .prop()-Methodeh3> <button id='update'>„Aktualisiere mich“-Schaltfläche><div style='margin-top: 50px'> <button id='change'>Klicken Sie auf die Schaltfläche „Mebutton“> „div“><script>$('#change').on('click', function () { $('#update').prop( 'disabled', true ); }); $('#change').on( 'dblclick', function () { $('#update').prop( 'disabled', false ); } ); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery.webp' alt="JqueryToggle"><p>Beispielausgabe der Methode .prop()</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/dart-lists">Dart-Liste</a>
</blockquote> <h3><span>2. Verwendung der .attr()-Methode</span></h3><p dir='ltr'><span>Verwendung der</span> <span>.attr()-Methode</span> <span>In jQuery schalten Sie das Attribut „disabled“ von Elementen um. Durch Klicken auf eine Schaltfläche wird eine andere Schaltfläche deaktiviert, durch Doppelklicken wird sie erneut aktiviert, wodurch die Benutzerinteraktion und Funktionalität innerhalb von Webseiten verbessert wird.</span></p> <p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>In diesem Beispiel verwenden wir die Methode .attr(), um die Schaltfläche zu aktivieren/deaktivieren. Durch Klicken wird eine andere Schaltfläche deaktiviert. Durch einen Doppelklick wird es wieder aktiviert, wodurch die Benutzerinteraktion und die Webfunktionalität verbessert werden.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>Skript> Kopf> <body> <h3>Verwenden der .attr()-Methodeh3> <button id='update'>Klicken Sie auf die Schaltfläche „Mich aktualisieren“.<div style='margin-top: 50px;'> <button id='change'>Klicken Sie auf die Schaltfläche „Me“> „div>“.<script>$('#change').on('click', function () { $('#update').attr('disabled', 'disabled'); }); $('#change').on('dblclick', function () { $('#update').removeAttr('disabled'); }); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <p> <br></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/apache-spark-tutorial">Spark-Tutorial</a>
</blockquote> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery-2.webp' alt="JqueryToggle2"><p>.attr()-Methode Beispielausgabe</p> <p> <br></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/news/">Nachricht</a> </li><li> <a href="/javascript-methods/">Javascript-Methoden</a> </li><li> <a href="/genetics/">Genetik</a> </li><li> <a href="/google/">Google</a> </li><li> <a href="/ooad-object-oriented-analysis/">Ooad – Objektorientierte Analyse Und Design</a> </li><li> <a href="/c-functions/">C-Funktionen</a> </li><li> <a href="/shell/">Hülse</a> </li><li> <a href="/nginx-tutorial/">Nginx-Tutorial</a> </li><li> <a href="/c-tutorial/">C-Tutorial</a> </li><li> <a href="/data-structures-algorithms-qna/">Datenstrukturen Und Algorithmen-Qna</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Linux-Shell-Befehle</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Linux-Shell-Befehle für Anfänger und Profis mit Beispielen zu Dateien, Verzeichnissen, Berechtigungen, Backup, ls, man, pwd, cd, chmod, man, Shell, Pipes, Filter, Regex, vi usw.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/linux-shell-commands"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/method-java">Methode in Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-an-expert-system">Was ist ein Expertensystem?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/parts-cpu">Teile der CPU</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/set-symbols">Symbole festlegen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/group-vs-order">GROUP BY vs. ORDER BY</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/rekha">Rekha-Indianer</a>
</li><li><a href="/top-command-linux-unix-with-examples">Unix-Top-Befehl</a>
</li><li><a href="/difference-between-array">Unterschied zwischen Array und Arraylist</a>
</li><li><a href="/bash-substring">Teilzeichenfolge in Bash</a>
</li><li><a href="/java-convert-int-double">Ganzzahl zum Verdoppeln von Java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechte Vorbehalten | <a href="//sv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>