logo

Cum se activează/dezactivează un buton folosind jQuery?

Activarea/dezactivarea unui buton folosind jQuery implică modificarea funcționalității acestuia pentru a accepta sau nu intrarea utilizatorului. Acest lucru se face de obicei prin manipularea proprietății sau a atributului său „dezactivat” prin metode jQuery precum `.prop()` sau `.attr()`.

mamta kulkarni actor

Pentru a activa/dezactiva un buton folosind jQuery, veți avea nevoie de o structură HTML de bază împreună cu JavaScript/jQuery. Mai jos este o structură simplă de cod pentru a începe



HTML
     Buton Activare/Dezactivare titlu><script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>script> cap> <body>  <button id='myButton'>Faceți clic pe Mebutton><script>$(document).ready(function(){ // Cod jQuery pentru a activa/dezactiva butonul // Adăugați codul dvs. aici });  script> body> html>>></pre> </code> <p dir='ltr'>  <br></p> <h2><span>Exemple de activare/dezactivare a unui buton folosind jQuery</span></h2><h3><span>1. Folosind metoda .prop():</span></h3><p dir='ltr'><span>Folosind</span> <span>.prop() în jQuery</span> <span>a activa/dezactiva un buton implică setarea proprietății sale „dezactivate” la adevărat sau fals, oferind un control eficient asupra interactivității sale, pe baza cerințelor aplicației și a interacțiunilor utilizatorului.</span></p> <p dir='ltr'>  <b>  <strong>Exemplu:</strong>  </b>  <span>În acest exemplu, folosim jQuery: Comută proprietatea „dezactivată” a butonului la clic și face dublu clic pe evenimente pentru o interacțiune ușoară a utilizatorului folosind metoda .prop().</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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> cap> <body> <h3>Folosind metoda .prop()3> <button id='update'>update mebutton><div style='margin-top: 50px'>  <button id='change'>faceți clic pe butonul meu> 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>Ieșire:</strong>  </b>  </p>  <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery.webp' alt="JqueryToggle"><p>Metoda .prop() Exemplu Ieșire</p> <h3><span>2. Folosind metoda .attr().</span></h3><p dir='ltr'><span>Folosind</span> <span>metoda .attr().</span> <span>în jQuery, comutați atributul „dezactivat” al elementelor. Făcând clic pe un buton, se dezactivează un alt buton, în timp ce dublu clic îl reactivează, îmbunătățind interacțiunea utilizatorului și funcționalitatea în paginile web.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Exemplu:</strong>  </b>  <span>În acest exemplu, folosim metoda .attr() pentru a activa/dezactiva butonul. Făcând clic se dezactivează un alt buton; dublu clic îl reactivează, îmbunătățind interacțiunea utilizatorului și funcționalitatea web.</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> cap> <body> <h3>Folosind metoda .attr()3> <button id='update'>Update Mebutton><div style='margin-top: 50px;'>  <button id='change'>Faceți clic pe Mebutton> div><script>$('#change').on('clic', funcția () { $('#update').attr('disabled', 'disabled'); });  $('#change').on('dblclick', function () { $('#update').removeAttr('disabled'); });  script> body> html>>></pre> </code> <p dir='ltr'>  <b>  <strong>Ieșire:</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>Metoda .attr() Exemplu de ieșire</p> <p>  <br></p>  <br>  <br></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="/backend-development/">Dezvoltare Backend</a> </li><li> <a href="/commerce-11th/">Comerț - Al 11-Lea</a> </li><li> <a href="/excel-how/">Excel-Cum Se Face</a> </li><li> <a href="/ruby-tutorial/">Tutorial Ruby</a> </li><li> <a href="/cpp-algorithm-library/">Cpp-Algoritm-Bibliotecă</a> </li><li> <a href="/best-apps/">Cele Mai Bune Aplicații</a> </li><li> <a href="/cpp-functions/">Cpp-Funcții</a> </li><li> <a href="/java-reflection/">Reflecție Java</a> </li><li> <a href="/ooad-object-oriented-analysis/">Ooad - Analiză Și Proiectare Orientată Pe Obiecte</a> </li><li> <a href="/gimp-tutorial/">Tutorial Gimp</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Tutorial Java Swing</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Tutorial Java Swing cu exemplu de JButton, Diferența dintre AWT și swing, exemplu simplu de swing java, exemplu de swing prin moștenire, JRadioButton, JTextField, JTextArea, JList, JColorChooser clase care se găsesc în pachetul javax.swing.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/java-swing-tutorial"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Articole Interesante</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/exceptions-java">Excepții în Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/parent-and-child-classes-having-same-data-member-in-java">Clasele de părinți și copii care au același membru al datelor în Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/svn-tutorial/">Tutorial Svn</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-nbsp">Ce este NBSP (Non-breaking Space)?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-network-topology">Ce este topologia rețelei?</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">Posturi Populare</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/acute-angle-definition">unghi ascutit</a>
</li><li><a href="/merge-sort-algorithm">sortare îmbinare java</a>
</li><li><a href="/how-open-file-java">fișier deschis în java</a>
</li><li><a href="/what-is-full-form-cdr">forma completă cdr</a>
</li><li><a href="/how-play-imessage-games-an-android-phone">jocuri cu mesaje pe Android</a>
</li><li><a href="/marker-interface-java">de ce interfața markerului în 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 Toate Drepturile Rezervate |  <a href="//bg.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>