Comment désactiver et activer un input avec jQuery : guide complet

Comment désactiver et activer un input avec jQuery ? Guide pour débutants et plus

Imagine la situation : tu crées un formulaire d'inscription, et tant que l'utilisateur n'a pas choisi un pays, le champ « Ville » doit être verrouillé. Ou tu as une boutique en ligne, et le bouton « Passer la commande » est inactif tant que la case de consentement n'est pas cochée. Ça te parle ? Cette tâche est le pain quotidien de tout développeur frontend. Et aujourd'hui, nous allons l'analyser à la loupe.

La question « Disable/enable an input with jQuery? » est l'une des plus populaires sur Stack Overflow (des milliers de vues et des dizaines de réponses). Et ce n'est pas un hasard : la simplicité apparente cache plusieurs pièges dans lesquels les débutants tombent. Dans ce guide, nous ne montrerons pas simplement du code — nous t'apprendrons à penser comme un ninja de jQuery. C'est parti !

Pourquoi ne pas utiliser .attr() pour disabled ?

Si tu as déjà cherché une solution sur Google, tu as sûrement vu de vieux conseils comme $('input').attr('disabled', 'disabled');. Cela fonctionnait à l'époque de jQuery 1.x, mais aujourd'hui, c'est une impasse. Pourquoi ?

• .attr() travaille avec les attributs HTML, tandis que .prop() travaille avec les propriétés de l'objet DOM.
• L'attribut disabled est une propriété booléenne qui doit être true ou false, et non une chaîne de caractères.
• En utilisant .attr('disabled', false), jQuery peut simplement supprimer l'attribut, mais pas toujours réinitialiser correctement l'état.

La norme moderne est d'utiliser .prop(). Retiens-le comme un mantra :

// Désactiver l'input$('#myInput').prop('disabled', true);

// Réactiver l'input$('#myInput').prop('disabled', false);

Simple, non ? Mais creusons un peu plus.

Exemples de base : désactiver et activer un seul input

Supposons que nous ayons un champ de saisie d'email et un bouton déclencheur. Nous voulons qu'en cliquant sur le bouton, le champ soit verrouillé ou déverrouillé.

<input type="email" id="emailInput" placeholder="Entrez votre email"><button id="toggleBtn">Verrouiller le champ</button>

<script>$(document).ready(function() {    $('#toggleBtn').on('click', function() {        var $input = $('#emailInput');        var isDisabled = $input.prop('disabled');                // Basculer l'état        $input.prop('disabled', !isDisabled);                // Changer le texte du bouton        $(this).text(isDisabled ? 'Verrouiller le champ' : 'Déverrouiller le champ');    });});</script>

Remarque : nous utilisons $(document).ready() — cela garantit que le DOM est chargé avant l'exécution du script. Sans cela, ton code pourrait ne pas trouver les éléments.

Travailler avec un groupe d'éléments : select, checkbox et textarea

La méthode .prop() est universelle. Elle fonctionne non seulement avec <input>, mais aussi avec <select>, <textarea>, <button> et même avec des ensembles entiers d'éléments.

Verrouiller tous les éléments d'un formulaire en une fois

Imagine que tu dois verrouiller tout le formulaire après l'envoi, pour que l'utilisateur ne modifie pas les données :

<form id="myForm">    <input type="text" name="name" placeholder="Nom">    <input type="email" name="email" placeholder="Email">    <select name="country">        <option value="">Choisissez un pays</option>        <option value="fr">France</option>        <option value="us">États-Unis</option>    </select>    <button type="submit">Envoyer</button></form>

<script>// Verrouiller tous les input, select et textarea à l'intérieur du formulaire$('#myForm').find('input, select, textarea, button').prop('disabled', true);</script>

On peut faire encore plus élégant : utiliser :input — c'est un pseudo-sélecteur jQuery qui sélectionne tous les élém