11521 sujets

JavaScript, DOM et API Web HTML5

OnClick sur un élément disabled

Bonjour,

J'ai un formulaire


<form class="global-class">
<input type = "radio" />
</form>


Et un code javascript, comme quoi, si je clique sur .global-class ça fait alert


$(document).ready(function(){
$(.global-class).click(function(){
alert('ok');
});
});


Cependant, je voudrais que le bouton radio à l'intérieur ne soit pas cliquable, donc je le mets en disabled


<form class="global-class">
<input type = "radio" [b]disabled[/b]/>
</form>


Et à partir de là, le javascript ne marche plus, je clique sur .globa-class et le "ok" dans le alert ne réponds plus.

Quelqu'un aurait-il une idée?

Merci et bonne journée
C'est tout à fait normal ! Si tu donnes l'attribut disabled, c'est bien pour que l'élément ne soit pas cliquable. Pas cliquable ça veut dire ne pas réagir au clic, et donc, ne pas envoyer de onclick.
Comme je me mets au jQuery, j'ai voulu en profiter pour accroitre mes connaissances dans ce domaine. Comme elles ne sont pas élevées, ce n'est pas difficile de les améliorer Smiley cligne

J'ai donc voulu essayer et tester l'utilisation de preventdefault que je ne connaissais pas.

Résultat de mes test:
nancyAlex a écrit :

$(.global-class).click(function(){... }
Ce serait plutôt 
$('.global-class').click(function(){... }


Oken a écrit :

.preventDefault() devrait résoudre ton problème.

Tu le mets où ton "preventDefault"? J'ai essayé à divers endroits dans la page: dans l'en-tête, dans la fonction "documentReady" (avant et après la définition de fonction de clic), dans la fonction appelée au clic, dans une inclusion <script> en fin de page, donc exécuté avant documentReady, sans résultat.

En fait, comme le signale Quentin, il semble que mettre "disabled" fait que le bouton n'est pas cliquable et donc il n'y a pas d'évènement clic généré, et donc jQuery ne sait pas capturer cet évènement et se rendre compte qu'il faut quand même exécuter la fonction.

Mais j’aimerais en avoir le cœur net.
Modifié par PapyJP (03 Mar 2015 - 10:19)
QuentinC a écrit :
C'est tout à fait normal ! Si tu donnes l'attribut disabled, c'est bien pour que l'élément ne soit pas cliquable. Pas cliquable ça veut dire ne pas réagir au clic, et donc, ne pas envoyer de onclick.

Si je donne l'attribut disabled, c'est que je ne veux pas que l'utilisateur puisse le modifier.
Traduire cela par "qu'il ne soit pas cliquable" est une interprétation. On pourrait aussi bien dire que je ne veux pas que le clic change la valeur sans pour autant rendre l'élément incliquable, par exemple justement pour faire qu'un clic produise un autre effet, comme nancyAlex voulait le faire.

Le comportement des éléments "disabled" d'un formulaire n'est pas intuitif. En gros ils sont là uniquement pour l'affichage (en gris sur fond gris) mais ils ne sont pas renvoyés avec le reste du formulaire à la feuille "action", contrairement aux <input type="hidden".../> qui ne sont pas affichés mais sont renvoyés.
Je mets souvent un hidden à côté d'un disabled pour assurer que l'information est renvoyée à la feuille action et pouvoir la prendre en compte dans le traitement.
Dans notre cas on va le mettre dans la fonction click, pour empêcher l’événement par défaut de se déclencher.


$(".global-class").click(function(event){
   event.preventDefault();
   alert('ok');
});

Modifié par Oken (03 Mar 2015 - 10:52)
Oken a écrit :
Dans notre cas on va le mettre dans la fonction click, pour empêcher l’événement par défaut de se déclencher.


$(".global-class").click(function(event){
   event.preventDefault();
   alert('ok');
});


ça ne fonctionne pas chez moi Smiley bawling
Qu'est-ce que j'ai fait de travers?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Disabled checkbox test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.global-class').click(function (event) {
                    event.preventDefault();
                    alert('ok');
                });
            });
        </script>
    </head>
    <body>
        <form class="global-class">
            <input type="radio" disabled="disabled" />
        </form>
    </body>
</html>
Il ne faut pas que l'élément soit disabled, sinon comme dit ci-dessus, l’événement ne se déclenchera pas.

A+
Modérateur
Selon la doc HTML:

a écrit :
A form control is disabled if its disabled attribute is set, or if it is a descendant of a fieldset element whose disabled attribute is set and is not a descendant of that fieldset element's first legend element child, if any.

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.


http://www.w3.org/TR/html5/forms.html#concept-fe-disabled

donc aucun évènement click n'est envoyé…
Modifié par kustolovic (03 Mar 2015 - 13:51)
Pour résumer, le fait de rendre disabled une checkock la rend incliquable, et par conséquent la commande event.preventDefault(); n'est pas applicable dans ce cas.

Nous n'avons donc pas de solution à apporter à nancyAlex.

Par contre si on écrit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Disabled checkbox test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.global-class').click(function (event) {
                    event.preventDefault();
                    alert('ok');
                });
            });
        </script>
    </head>
    <body>
        <form class="global-class">
            <input type="radio" />
        </form>
    </body>
</html>

on obtient bien fonctionnellement ce qu'il semblait souhaiter: quand on clique sur l'option sa valeur ne change pas (à cause de event.preventDefault();) et l'action est bien déclenchée.
Poussons un cran plus loin et stylons cette option pour la faire apparaitre grisée, je pense que ça devrait faire l'affaire.

Est-ce que cette réponse est satisfaisante?
a écrit :
Traduire cela par "qu'il ne soit pas cliquable" est une interprétation. On pourrait aussi bien dire que je ne veux pas que le clic change la valeur sans pour autant rendre l'élément incliquable, par exemple justement pour faire qu'un clic produise un autre effet, comme nancyAlex voulait le faire.


Dans ce cas, essaye readonly.

OU sinon, tu fais un faux disabled avec une classe CSS, et dans ce cas n'oublie pas aria-disabled pour l'accessibilité.
EDIT: exactement ce que suggère PapyJP, à cela près qu'il a oublié aria-disabled

a écrit :
Le comportement des éléments "disabled" d'un formulaire n'est pas intuitif. En gros ils sont là uniquement pour l'affichage (en gris sur fond gris) mais ils ne sont pas renvoyés avec le reste du formulaire à la feuille "action", contrairement aux <input type="hidden".../> qui ne sont pas affichés mais sont renvoyés.
Je mets souvent un hidden à côté d'un disabled pour assurer que l'information est renvoyée à la feuille action et pouvoir la prendre en compte dans le traitement.


C'est aussi tout à fait normal qu'un champ disabled ne fasse pas partie des données renvoyées.

Un champ caché et un champ désactivé n'ont pas le même sens.

Un champ est désactivé mais reste visible le plus souvent parce qu'il n'a pas d'utilité ou parce que sa valeur n'a aucune importance dans un contexte précis, par exemple en conséquence de choix précédents. L'exemple classique, la zone de texte « autre » qui n'a d'utilité que si on coche le bouton radio « autre, précisez ».
Le fait de le laisser visible dans tous les cas ou seulement quand il est vraiment utile est un choix du designer de l'interface.
Modifié par QuentinC (03 Mar 2015 - 16:46)
Sujet clos
Aller à