[Résolu] Activer et désactiver une liste déroulante ...

Bonsoir à vous,

en fait, j'affiche une liste déroulante qui n'est pas modifiable au départ.

<select name="produit" id="produit" class="input-disabled>
  <option value="1">Rouge</option>
  <option value="2">Blanc</option>
  <option value="3" selected>Noir</option>
</select>

.input-disabled {
    pointer-events: none;
    border: none;
}

Puis, après avoir cliqué sur un bouton, j'aimerais bien que cette liste déroulante devienne active mais je n'y arrive pas.

Voici le code javascript que j'utilise pour la rendre active mais ça ne fonctionne pas :

    // Toggle "produit" field
    if ($("#produit").attr('disabled'))
    {
        $("#produit").prop("disabled", false);
    }
    else
    {
        $("#produit").prop("disabled", true);
    }

Quad ce code est exécuté, j'essaie de changer la valeur dans la liste déroulante mais elle est toujours inactive.

Merci d'avance.

Bonne soirée,
Thierry
Modifié par THIRT05 (21 Feb 2022 - 20:50)

Bonjour à vous,

j'ai trouvé une solution.

En fait, je n'ai pas besoin de spécifier la classe css "input-disabled".

A la place, je mets le code HTML suivant dans l'élément SELET : disabled="disabled" ...

Voici le code complet :

<select name="produit" id="produit" disabled="disabled">
  <option value="1">Rouge</option>
  <option value="2">Blanc</option>
  <option value="3" selected>Noir</option>
</select>

    // Toggle "produit" field
    if ($("#produit").attr('disabled'))
    {
        $("#produit").prop("disabled", false);
    }
    else
    {
        $("#produit").prop("disabled", true);
    }

Bonne journée,
Thierry
Modifié par THIRT05 (22 Feb 2022 - 08:16)