Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 648
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 648
    Points : 91 580
    Points
    91 580
    Billets dans le blog
    20

    Par défaut Désactiver vos champs de formulaires HTML5 par groupes



    Comme vous le savez certainement, pour désactiver qu'un champ de formulaire soit inactif, vous devez lui attribuer un attribut disabled.
    Notez qu'il s'agit d'un attribut de type booléen. Ces attributs booléens ont la particularité que leur seule présence suffit à activer la fonctionnalité.

    Si vous optez pour une syntaxe XHTML (c'est-à-dire conforme aux règles XML), vous devez lui attribuer une valeur (la seule autorisée pour que le document soit valide est "disabled", mais n'importe qu'elle autre valeur aura le même effet si ce n'est que le document ne sera plus valide) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input name="total" disabled="disabled" />
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input name="total" disabled="foo" /><!-- aura le même effet -->
    Si au contraire vous optez pour une syntaxe HTML, alors seul l'attribut est nécessaire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input name="total" disabled>
    Le problème que vous pouvez rencontrer, c'est dans le cas où vous ayez plusieurs champs à désactiver de la sorte. Bien entendu, multiplier les attributs disabled est faisable, mais un peu lourd.
    Heureusement, HTML5 arrive à votre secours.
    En effet, il est désormais possible d'affecter l'attribut à une balise <fieldset>. Cette balise a pour but de regrouper des champs ayant une finalité commune.
    Ainsi, en affectant l'attribut disabled à cette balise, tous les champs enfants seront désactivés sans avoir besoin de le préciser pour chacun d'eux :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <fieldset id="groupe" disabled="disabled">
        <input name="foo" />
        <input type="checkbox" name="bar" />
        <select name="toto">
            <option value="1">Valeur 1</option>
            <option value="2">Valeur 2</option>
            <option value="3">Valeur 3</option>
            <option value="4">Valeur 4</option>
        </select>
    </fieldset>
    Enfin, vous aurez peut-être besoin d'activer ou de désactiver ces champs en fonction des actions de l'utilisateur. Vous pourrez le faire uniquement en JavaScript puisque ni HTML ni CSS ne prévoient d'interaction permettant d'influer sur cet attribut.
    De la même manière, la propriété JavaScript disabled d'un objet de type HTMLElement correspondant à cet attribut est de type booléenne.
    Notez que cette propriété prend comme valeur true ou false mais que le transtypage dynamique de JavaScript permet un comportement similaire à celui de HTML : si vous affectez à cette propriété n'importe qu'elle valeur non équivalente à false (par exemple la chaine 'disabled'), l'élément sera désactivé, sinon, il sera activé.
    Dans notre exemple précédent, il est donc possible de créer un bouton permettant d'activer ou non un groupe de champs de formulaire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <button id="switchActif">Activer / désactiver le groupe</button>
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    document.getElementById('switchActif').onclick = function(){
        var $groupe = document.getElementById('groupe');
        $groupe.disabled = !$groupe.disabled;
    };

    Voir un exemple en ligne.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    mai 2015
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : mai 2015
    Messages : 153
    Points : 243
    Points
    243

    Par défaut

    Bonjour Bovino,

    Pour info, je suis débutant et c'est en voulant appliquer le code suivant :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    [disabled] {
    cursor: not-allowed;
    }

    que j'ai par la suite fait une recherche d'exemples sur "disabled" et suis enfin tombé sur ton article (Google).

    Merci !
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

Discussions similaires

  1. [CR 10] Champs total cumulé : évaluer par groupe avec une formule
    Par leloup84 dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 13/02/2015, 09h42
  2. Activer et désactiver les champs d’un formulaire
    Par ulysse031 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 25/04/2011, 18h38
  3. [Formulaire]Trier par groupe défini
    Par Harmony dans le forum IHM
    Réponses: 1
    Dernier message: 26/03/2007, 16h57
  4. Désactiver un champ input par rapport à un autre
    Par guilhemr dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 11/04/2006, 16h35
  5. concaténer par GROUP BY des champs text/varchar
    Par Fredobdx dans le forum Requêtes
    Réponses: 1
    Dernier message: 12/07/2005, 13h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo