logo

TechCodeview

Hvordan aktiverer/deaktiverer man en knap ved hjælp af jQuery?

Aktivering/deaktivering af en knap ved hjælp af jQuery involverer at ændre dens funktionalitet til enten at acceptere brugerinput eller ej. Dette gøres typisk ved at manipulere dens 'disabled' egenskab eller attribut gennem jQuery-metoder som `.prop()` eller `.attr()`.

For at aktivere/deaktivere en knap ved hjælp af jQuery, skal du bruge en grundlæggende HTML-struktur sammen med JavaScript/jQuery. Nedenfor er en simpel kodestruktur for at komme i gang

HTML 
     Knap Aktiver/Deaktiver titel><script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>script> hoved> <body>  <button id='myButton'>Klik på Mebutton><script>$(document).ready(function(){ // jQuery-kode til at aktivere/deaktivere knap // Tilføj din kode her });  script> body> html>></pre> </code> <p dir='ltr'>  <br></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <h2><span>Eksempler på aktivering/deaktivering af en knap ved hjælp af jQuery</span></h2><h3><span>1. Brug af .prop() metoden:</span></h3><p dir='ltr'><span>Ved brug af</span> <span>.prop() i jQuery</span> <span>at aktivere/deaktivere en knap involverer at indstille dens 'deaktiverede' egenskab til sand eller falsk, hvilket giver effektiv kontrol over dens interaktivitet baseret på applikationskrav og brugerinteraktioner.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/collections-java">java samlinger</a>
</blockquote> <p dir='ltr'>  <b>  <strong>Eksempel:</strong>  </b>  <span>I dette eksempel bruger vi jQuery: Skifter knappens 'disabled' egenskab ved klik og dobbeltklik på hændelser for jævn brugerinteraktion ved hjælp af .prop() metoden.</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> hoved> <body> <h3>Brug af .prop()-metodenh3> <button id='update'>Opdater me-knap><div style='margin-top: 50px'>  <button id='change'>klik på mebutton> div><script>$('#change').on('klik', funktion () { $('#update').prop( 'disabled', true ); });  $('#change').on( 'dblclick', function () { $('#update').prop( 'disabled', false ); } );  script> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Produktion:</strong>  </b>  </p>  <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery.webp' alt="JqueryToggle"><p>.prop() metode Eksempel Output</p> <h3><span>2. Brug af .attr() metoden</span></h3><p dir='ltr'><span>Bruger</span> <span>.attr() metode</span> <span>i jQuery skifter du 'deaktiveret' attributten for elementer. Hvis du klikker på en knap, deaktiveres en anden knap, mens dobbeltklik genaktiverer den, hvilket forbedrer brugerinteraktion og funktionalitet på websider.</span></p> <p dir='ltr'>  <b>  <strong>Eksempel:</strong>  </b>  <span>I dette eksempel bruger vi .attr()-metoden til at aktivere/deaktivere knappen. Et klik deaktiverer en anden knap; dobbeltklik genaktiverer det, hvilket forbedrer brugerinteraktion og webfunktionalitet.</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> hoved> <body> <h3>Ved at bruge .attr()-metodenh3> <button id='update'>Opdater Me-knap><div style='margin-top: 50px;'>  <button id='change'>Klik på Mebutton> div><script>$('#change').on('klik', funktion () { $('#update').attr('disabled', 'disabled'); });  $('#change').on('dblclick', function () { $('#update').removeAttr('disabled'); });  script> body> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Produktion:</strong>  </b>  </p> <p>  <br></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/python-program-find-difference-between-two-strings">forskel mellem to strenge python</a>
</blockquote>  <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery-2.webp' alt="JqueryToggle2"><p>.attr() metode Eksempel output</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="">Kategori</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/classroom-resources/">Klasseværelsesressourcer</a> </li><li> <a href="/robotics-tutorial/">Robotik Tutorial</a> </li><li> <a href="/business/">Forretning</a> </li><li> <a href="/dot-net/">Dot-Net</a> </li><li> <a href="/cobol-tutorial/">Cobol Tutorial</a> </li><li> <a href="/c-data-types/">C-Datatyper</a> </li><li> <a href="/cyber-security-tutorial/">Cybersikkerhedsvejledning</a> </li><li> <a href="/jackson-tutorial/">Jackson Tutorial</a> </li><li> <a href="/ruby-tutorial/">Ruby Tutorial</a> </li><li> <a href="/compiler-tutorial/">Kompiler Tutorial</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">forbigående nøgleord i Java</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> </span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/transient-keyword-in-java"> <i class="fa fa-external-link"></i> Læs Mere</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Interessante Artikler</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/implicit-initialization-of-variables-with-0-or-1-in-c">Implicit initialisering af variabler med 0 eller 1 i C</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-use-whatsapp-web-your-pc">Sådan bruger du WhatsApp Web på din pc, bærbare computer eller tablet</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/recursion-tree-method">Rekursionstræmetode</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-recover-deleted-snapchat-messages">Sådan gendannes slettede Snapchat-beskeder?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/difference-between-bitter">Forskellen mellem bitter og sur</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">Populære Indlæg</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/postorder-traversal">postorder traversering af binært træ</a>
</li><li><a href="/roman-number-1-100">romerske tal 1 til 100</a>
</li><li><a href="/c-int-string">int til streng c++</a>
</li><li><a href="/mylivecricket-alternatives">mylivericket</a>
</li><li><a href="/loops-java">java loops</a>
</li><li><a href="/how-read-csv-file-java">hvordan man læser csv-filen i java</a>
</li><li><a href="/hacking-process">hacking behandling</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 Rettigheder Forbeholdes |  <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Os</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>
	
</body>
</html>