Evenement click sur bouton "disabled"
Bonjour,
Mon soucis est à mi-chemin entre bootstrap et javascript. J'utilise la version 3.3.7 de Bootstrap je suis pas encore passé à la version 4. Je viens de finir un jeu de plateau en tour par tour en javascript mais j'ai un soucis avec mes boutons Attaque/ Défense. J'ai reproduit exactement le schéma que j'utilise ici et je vous fais une petit demo sur code Pen pour illustrer le problème.
La class disabled de Bootstrap3.3.7 rend le bouton toujours actif à l'evenement ! ! l'effet visuel est bien disabled mais en fait l'evenement lui est toujours actif et ça c'est pas possible. Savez vous pourquoi ? Ouvez la console sur code Pen
Vous verrez le problème clairement en cliquant sur un des boutons disabled.
https://codepen.io/anon/pen/rvwpVZ?editors=1011
Une des solutions est de ne pas utiliser la class disabled de Bootstrap et de mettre disabled comme ceci
<div class='btn-gauche' role='group'>
<button type='button' id='demAtt' class='btn btn-primary g1' disabled>Attaquer</button>
<button type='button' id='demDef' class=' btn btn-primary g2' disabled>Defendre</button>
</divavec cette methode il me suffit de passer en true et false quand je veux, mais le seul soucis c'est que le navigateur firefox quand je recharge la page ne réactive pas les disabled, au départ ils sont tous disabled, sauf celui tiré au sors pour commencer. Sous Chrome c'est parfait mais Firefox non ? du coup je suis obligé de traiter 2 fois en javascript si je veux l'effet voulu.
Ce que je fais
HTML
<div class='btn-gauche' role='group'>
<button type='button' id='demAtt' class='disabled btn btn-primary g1'>Attaquer</button>
<button type='button' id='demDef' class='disabled btn btn-primary g2'>Defendre</button>
</div>
JS
var btn1 = document.getElementById('demAtt');
var btn2 = document.getElementById('demDef');
var nbA = Math.round(Math.random());
if(nbA === 0){
btn1.classList.remove('disabled');
} else{
btn2.classList.remove('disabled');
}
function attack(){
console.log('I have clicked on attack');
btn2.classList.remove('disabled');
btn1.classList.add('disabled');
}
btn1.addEventListener('click',attack);
function defense(){
btn1.classList.remove('disabled');
btn2.classList.add('disabled');
console.log('I have clicked on defense')
}
btn2.addEventListener('click',defense);Merci d'avance pour votre aide
12 réponses
Bonjour, il te faut faire les deux, ajouter la classe pour le style et ajouter l'attribut pour le comportement. Si je reprends ton code, ça donnera quelque chose comme cela.
function attack(){
console.log('I have clicked on attack');
btn2.classList.remove('disabled');
btn2.disabled = false;
btn1.classList.add('disabled');
btn1.disabled = true;
}Ca fonctionne sous chrome sûrement parce que chrome est un navigateur qui ne respecte pas les standards W3C...
As-tu conscience que css ne gère que l'affichage et que bootstrap n'est que du css?
Tu pourras donner n'importe quelle apparence exotique à tes boutons, si tu ne fais que jouer avec l'affichage, le comportement ne changera pas!
Ton problème c'est du pur javascript! Alors, oui, en fonction de l'état réel des boutons, les navigateurs adaptent l'affichage! Mais ça n'a rien d'obligatoire... Bien qu'en pratique, aujourd'hui, un navigateur digne de ce nom adaptera toujours l'affichage des composants en fonction de leur état! Donc pas besoin de jouer avec css pour griser les boutons disabled!
Oui ok très bien je comprends pour bootstrap et le fait que ce n'est que de l'affichage. "Pas besoin de css pour griser les boutons" soit mais sans css Firefox est perdu !! quelle est la solution ?
Parce que la en faite si je veux que ça fonctionne correctement je suis obligé de traité en javascript, le css et le non css donc c'est très redondant.
et merci de ta réponse
Bonjour prbaron
Ok en faite c'est exactement ce que je fais ! mais il me semblait que ce n'était pas très propre comme façon de procédé. Si je n'ai pas le choix !!! bah! merci c'est bien ce que je fais dans mon code, je vais laisser comme ça.
Merci pour ta réponse.
Non, mauvaise solution de la part de prbaron...
Pas besoin de s'emmerder avec css ^^'
https://codepen.io/anon/pen/pVwKNm?editors=1011
@Psylozoff en effet dans ce cas, pas besoin du CSS car c'est Bootstrap. Mais c'est tout simplement parce que Bootstrap gère le CSS pour la classe ET l'attribut. Cela peut ne pas être le cas avec un autre framework CSS.
Psylozoff, non j'ai besoin que Firefox me donne visuellement ce que je veux avec cette methode c'est pas le cas.
Lorsque je recharge la page du jeu, Firefox laisse les boutons grisés dans l'etat ou le jeu était quand je relance la page. Alors que par Défaut ils sont tous disabled sauf celui qui est tiré au sors. chrome gére ça parfaitement mais pas Firefox. Donc utiliser les 2 solutions j'ai rien trouvé d'autre. Il faut qu'i y est le visuel mais aussi que l'evenement ne soit pas actif .
Ne vous embettez pas, je vais faire comme ça c'est pas grave. Merci à vous deux pour votre aide. Je vous souhaite une excellente journée
Si FF grise un bouton c'est qu'il est disabled et que tu pourras pas cliquer dessus... Si le bouton est grisé mais que tu peux cliquer dessus c'est bootstrap qui merde :-)
@prbaron, y'a pas besoin d'un quelconque framework css pour qu'un bouton disabled soit grisé ^^' C'est le comportement par défaut recommandé par le W3C...
Par contre, @Parad0xJ, tu as bien mit ton code dans un évènement onload de ton doc..??
Question rhétorique, hein ;-) Je comprends bien que non... Du coup, faudrait :-s
Et, en bonus, penche-toi sur js! Etudie le sujet..! Ca aidera ;-)