Het in-/uitschakelen van een knop met jQuery houdt in dat de functionaliteit ervan wordt gewijzigd om gebruikersinvoer wel of niet te accepteren. Dit wordt meestal gedaan door de ‘disabled’ eigenschap of het attribuut ervan te manipuleren via jQuery-methoden zoals `.prop()` of `.attr()`.
Om een knop met jQuery in of uit te schakelen, heb je naast JavaScript/jQuery een eenvoudige HTML-structuur nodig. Hieronder vindt u een eenvoudige codestructuur om u op weg te helpen
HTML Knop Titel in-/uitschakelen><script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>script> hoofd> <body> <button id='myButton'>Klik op de knop Ik><script>$(document).ready(function(){ // jQuery-code om knop in/uit te schakelen // Voeg hier uw code toe }); script> body> html>></pre> </code> <p dir='ltr'> <br></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <h2><span>Voorbeelden van het in-/uitschakelen van een knop met jQuery</span></h2><h3><span>1. De .prop()-methode gebruiken:</span></h3><p dir='ltr'><span>Gebruik makend van</span> <span>.prop() in jQuery</span> <span>Om een knop in/uit te schakelen, moet de eigenschap 'uitgeschakeld' op waar of onwaar worden ingesteld, waardoor efficiënte controle over de interactiviteit wordt geboden op basis van applicatievereisten en gebruikersinteracties.</span></p> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>In dit voorbeeld gebruiken we jQuery: Schakelt de eigenschap 'uitgeschakeld' van de knop in bij klik- en dubbelklikgebeurtenissen voor soepele gebruikersinteractie met behulp van de .prop()-methode.</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'>script> hoofd> <body> <h3>Met behulp van de .prop() methodeh3> <button id='update'>update mijknop><div style='margin-top: 50px'> <button id='change'>klik op mijknop> div><script>$('#change').on('klik', function () { $('#update').prop( 'uitgeschakeld', true ); }); $('#change').on( 'dblclick', function () { $('#update').prop( 'uitgeschakeld', false ); } ); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery.webp' alt="JQueryToggle"><p>.prop() methode Voorbeelduitvoer</p> <h3><span>2. De methode .attr() gebruiken</span></h3><p dir='ltr'><span>De ... gebruiken</span> <span>.attr() methode</span> <span>in jQuery schakel je het ‘uitgeschakelde’ attribuut van elementen in. Als u op een knop klikt, wordt een andere knop uitgeschakeld, terwijl dubbelklikken deze weer inschakelt, waardoor de gebruikersinteractie en functionaliteit binnen webpagina's worden verbeterd.</span></p> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>In dit voorbeeld gebruiken we de methode .attr() om de knop in/uit te schakelen. Als u klikt, wordt een andere knop uitgeschakeld; dubbelklikken schakelt het opnieuw in, waardoor de gebruikersinteractie en de webfunctionaliteit worden verbeterd.</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'>script> hoofd> <body> <h3>Met behulp van de .attr() methodeh3> <button id='update'>Update mijknop><div style='margin-top: 50px;'> <button id='change'>Klik op de knop Me> div><script>$('#change').on('klik', function () { $('#update').attr('uitgeschakeld', 'uitgeschakeld'); }); $('#change').on('dblclick', function () { $('#update').removeAttr('uitgeschakeld'); }); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <p> <br></p> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery-2.webp' alt="JQueryToggle2"><p>.attr() methode Voorbeelduitvoer</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/sql-server-tutorials/">Sql Server-Zelfstudies</a> </li><li> <a href="/c-conversion-programs/">C-Conversieprogramma's</a> </li><li> <a href="/english-word-play/">Engelse Woordspeling</a> </li><li> <a href="/groovy-tutorial/">Groovy-Tutorial</a> </li><li> <a href="/alphabet/">Alfabet</a> </li><li> <a href="/java-exceptions/">Java-Uitzonderingen</a> </li><li> <a href="/kinematics/">Kinematica</a> </li><li> <a href="/about-us/">Over Ons</a> </li><li> <a href="/free-games/">Gratis Spellen</a> </li><li> <a href="/c-programs/">C-Programma's</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">Voor- en nadelen van YouTube</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Voor- en nadelen van YouTube met blog, wat is quora, wat is yandex, contactpagina, duckduckgo-zoekmachine, zoekmachinejournaal, Facebook, Google Chrome, Firefox etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/advantages-disadvantages-youtube"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-3-3-8-decimal">Wat is 3 3/8 als decimaal?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/new-operator-vs-newinstance-method-in-java">new Operator vs newInstance() Methode in Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/address-operator-c">Adres Operator & in C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-make-python-auto-clicker">Hoe maak je een automatische Python-clicker?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/uncategorized/">Niet Gecategoriseerd</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/list-cities-usa">hoeveel steden zijn er in ons</a>
</li><li><a href="/binary-tree-vs-binary-search-tree">binaire zoekboom versus binaire boom</a>
</li><li><a href="/string-array-java">tekenreeksarray</a>
</li><li><a href="/javascript-offsetheight">verschoven hoogte</a>
</li><li><a href="/java-scanner-next-method">scan.volgende java</a>
</li><li><a href="/javascript-onload">js onload</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 Rechten Voorbehouden | <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>