Affichage de bouton CSS lors de modification de classe [Résolu]

[tus01]

Bonjour,

J'ai un problème avec l'affichage d'un bouton. J'ai une page de formulaire sur laquelle apparaissent 5 checkbox et un bouton de validation. Si aucune checkbox n'est cochée, je souhaite que le bouton soit grisé (style standard lors de l'arrivée sur la page). Si au moins une checkbox est cochée, je souhaite changer le style du bouton grâce à une jquerry add et remove class.
Le problème vient sur la manière dont la classe est codée. Pour le bouton grisé tout va bien, j'ai ceci:

Code :

1
2
3
4
5
6
7
8
.col-left{float:left; width:153px;  margin-right:12px; color: #58585A;}
.col-left h3{font-size:1.2em; font-weight:bold; color:#000; margin:0 0 5px 5px;}
.col-left .button-left{text-align:center;}
.col-left  .btn_right_liste{background:url(../images/btn_form_send_right.png) no-repeat right center; padding:0 4px 0 0; height:23px; display:inline-block; text-align:center; margin:0 10px;}
.col-left  .btn_left_liste {background:url(../images/btn_form_send_left.png) no-repeat left center; height:23px; display:inline-block;}
.col-left a.btn_right_liste:hover{text-decoration:none;}
a.btn_right_liste span { cursor:pointer; }
.col-left .btn_left_liste span{padding:4px 16px 0 20px; color:#FFF; font-size:12px; font-weight:bold; display:inline-block; height:19px; background:none;}

Et ceci pour le code html de mon bouton:

Code html :

1
2
3
4
5
6
7
8
9
10
11
<div class="col-left">
	<div class="msg-list-selection" >
		<p align="center">
			<a class="btn_right_liste" href="javascript:envoiFormulaire();">
				<span class="btn_left_liste">
					<span>Rechercher</span>
				</span>	
			</a>
		</p>
	</div>
</div>

L'idée ici c'est de changer l'image de background du bouton en modifiant la class du span et du a de manière dynamique avec ma JQuerry. Le problème c'est que lorsque je change la classe, soit le style n'est pas interprété, soit il est mal intérprété.

Je me demande si je mets bien le nouveau style sur le bon objet. Est-ce que je peux simplement dupliquer mes classes suivantes en changeant leur nom:

Code :

1
2
3
4
5
.col-left .btn_right_liste{background:url(../images/btn_form_send_right.png) no-repeat right center; padding:0 4px 0 0; height:23px; display:inline-block; text-align:center; margin:0 10px;}
.col-left .btn_left_liste {background:url(../images/btn_form_send_left.png) no-repeat left center; height:23px; display:inline-block;}
 
.col-left .btn_right_listeOK{background:url(../images/btn_form_send_right_OK.png) no-repeat right center; padding:0 4px 0 0; height:23px; display:inline-block; text-align:center; margin:0 10px;}
.col-left .btn_left_listeOK {background:url(../images/btn_form_send_left_OK.png) no-repeat left center; height:23px; display:inline-block;}

Et de cette manière n'avoir que la classe qui gère l'affichage de l'image qui change ? Car en faisant ça, je n'obtiens pas le résultat obtenu...

Merci par avance pour votre aide..

[tus01]

J'ai modififé le style CSS comme suit:

Code :

.col-left  .btn_right_liste{background-image:url(../images/btn_form_send_right_grey.png); background-repeat:no-repeat; background-position:right center; padding:0 4px 0 0; height:23px; display:inline-block; text-align:center; margin:0 10px;}

Et ensuite j'ai utilisé la fonction jquerry qui permet de modifier un style:

Code :

$('a..btn_right_liste').css('background-image', 'url(/client_web/mimes/client/images/btn_form_send_right.png)');