L'activation/désactivation d'un bouton à l'aide de jQuery implique de modifier sa fonctionnalité pour accepter ou non la saisie de l'utilisateur. Cela se fait généralement en manipulant sa propriété ou son attribut « désactivé » via des méthodes jQuery telles que `.prop()` ou `.attr()`.
Pour activer/désactiver un bouton à l'aide de jQuery, vous aurez besoin d'une structure HTML de base ainsi que de JavaScript/jQuery. Vous trouverez ci-dessous une structure de code simple pour vous aider à démarrer
HTML Bouton Activer/Désactivertitre><script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>script> tête> <body> <button id='myButton'>Cliquez sur le bouton Moi><script>$(document).ready(function(){ // Code jQuery pour activer/désactiver le bouton // Ajoutez votre code ici }); script> corps> html>></pre> </code> <p dir='ltr'> <br></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <h2><span>Exemples d'activation/désactivation d'un bouton à l'aide de jQuery</span></h2><h3><span>1. En utilisant la méthode .prop() :</span></h3><p dir='ltr'><span>En utilisant</span> <span>.prop() dans jQuery</span> <span>activer/désactiver un bouton implique de définir sa propriété « désactivé » sur vrai ou faux, offrant ainsi un contrôle efficace de son interactivité en fonction des exigences de l'application et des interactions de l'utilisateur.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-generate-random-number-java">aléatoire pas de générateur en java</a>
</blockquote> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Dans cet exemple, nous utilisons jQuery : active la propriété « désactivée » du bouton lors des événements de clic et de double-clic pour une interaction utilisateur fluide à l'aide de la méthode .prop().</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> tête> <body> <h3>Utilisation de la méthode .prop()h3> <button id='update'>bouton me mettre à jour><div style='margin-top: 50px'> <button id='change'>cliquez sur moibouton> div><script>$('#change').on('clic', function () { $('#update').prop( 'disabled', true ); }); $('#change').on( 'dblclick', function () { $('#update').prop( 'disabled', false ); } ); script> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/blogathon-2021/17/how-enable-disable-button-using-jquery.webp' alt="JqueryToggle"><p>Méthode .prop() Exemple de sortie</p> <h3><span>2. Utilisation de la méthode .attr()</span></h3><p dir='ltr'><span>En utilisant le</span> <span>Méthode .attr()</span> <span>dans jQuery, vous activez l'attribut « désactivé » des éléments. Cliquer sur un bouton désactive un autre bouton, tandis qu'un double-clic le réactive, améliorant ainsi l'interaction de l'utilisateur et les fonctionnalités des pages Web.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Dans cet exemple, nous utilisons la méthode .attr() pour activer/désactiver le bouton. Cliquer désactive un autre bouton ; un double-clic le réactive, améliorant ainsi l'interaction de l'utilisateur et la fonctionnalité 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> tête> <body> <h3>Utilisation de la méthode .attr()h3> <button id='update'>Bouton Me mettre à jour><div style='margin-top: 50px;'> <button id='change'>Cliquez sur le bouton Moi> div><script>$('#change').on('clic', function () { $('#update').attr('disabled', 'disabled'); }); $('#change').on('dblclick', function () { $('#update').removeAttr('disabled'); }); script> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</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>Méthode .attr() Exemple de sortie</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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/commerce-12th/">Commerce - 12Ème</a> </li><li> <a href="/java-awt-events/">Java Awt Et Événements</a> </li><li> <a href="/chemical-compounds/">Composants Chimiques</a> </li><li> <a href="/physics-concepts/">Concepts De Physique</a> </li><li> <a href="/csharp-dictionary-class/">Classe De Dictionnaire Csharp</a> </li><li> <a href="/angular-material/">Matériau Angulaire</a> </li><li> <a href="/prolog-tutorial/">Tutoriel Prologue</a> </li><li> <a href="/ancient-history/">Histoire Ancienne</a> </li><li> <a href="/c-manipulator/">Manipulateur C++</a> </li><li> <a href="/python-exceptions/">Exceptions Python</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">Fichiers JAR en Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un JAR (Java Archive) est un format de fichier de package généralement utilisé pour regrouper de nombreux fichiers de classe Java et les métadonnées et ressources associées (texte, images, etc.) dans un seul fichier afin de distribuer des logiciels d'application ou des bibliothèques sur la plate-forme Java. En termes simples, un fichier JAR est un fichier qui contient une version compressée de fichiers .class, de fichiers audio, de fichiers image ou de répertoires. Nous pouvons imaginer un fichier .jar comme un fichier zippé (.zip) créé à l'aide du logiciel WinZip. Même le logiciel WinZip peut être utilisé pour extraire le contenu d’un .jar. Vous pouvez donc les utiliser pour des tâches telles que la compression de données sans perte, l'archivage, la décompression et le décompression d'archives. Voyons comment créer un fichier .jar et les commandes associées qui nous aident à travailler avec des fichiers .jar</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/jar-files-in-java"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-add-border-css">Comment ajouter une bordure en CSS ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/robotics-tutorial/">Tutoriel De Robotique</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cyber-defence-intelligence/">Intelligence De Cyberdéfense</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-into-columbia-13156">Comment entrer en Colombie : 3 conseils clés</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/an-inch-is-2-5-cm-that-means-180-cm-is-72-inches">Un pouce équivaut à 2,5 cm. Cela signifie que 180 cm équivaut à 72 pouces. Si 72 pouces équivaut à 6 pieds, pourquoi 180 cm équivaut à 5 pieds 11 ?</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">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-string-int">comment convertir une chaîne en entier en Java</a>
</li><li><a href="/prime-number-program-java">nombre premier en Java</a>
</li><li><a href="/booths-multiplication-algorithm">algorithme de stand</a>
</li><li><a href="/how-find-hidden-apps-android">applications cachées sur cet appareil</a>
</li><li><a href="/network-operating-system">système d'exploitation réseau</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 Tous Les Droits Sont Réservés | <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</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>