Comment modifier background li de l'attribut en bouton radio checked ?

[slykereven]

Bonjour,

 

Comment faire pour modifier le background-color li de l'attribut d'un produit qui est checked avec bouton radio.

 

Dans l'image d'exemple, les boutons radio sont cachés, le hover pas de problème, mais en checked je voudrais que ça reste comme le hover mais je n'y arrive pas ...

 

Je vois le <span class="checked"> qui se déplace selon l'attribut sélectionné, j'imagine peut-être essayer d'avoir cette classe aussi dan le li parent du radio sélectionné.

 

Si quelqu'un à une solution ou une piste ?

J'espère avoir été assez précis

 

Merci

 

[xav91]

avec un truc du genre :

 

HTML

<input type="radio" name="test" id="test_1" value="1" />
<label for="test_1"></label>

CSS

input[type=radio] { display:none; }
label {
    display:inline-block;
     /* non selectionne on afiche une image pour l exemple */
    width:100px;
    height:30px;
    background-image:url de ton image; 
}

input[type=radio]:checked + label { 
    display:inline-block;
    /* selectionne on afiche une couleur et plus l image, toujours pour l exemple */
    background: #0080FF;
    height: 30px;
    width: 100px;
}

Edited May 27, 2014 by xav91 (see edit history)

[slykereven]

Ok, merci pour la réponse,

 

j'avais commencé à explorer la piste du :checked en CSS mais apparemment les listes d'attributs ont toutes checked="checked" , du coup ça se répercute sur toute les <li> , d'après ce que j'ai vu prestashop utilise class="checked" pour savoir quel bouton radio est actif, sur un indice de Vekia je suis parti sur jQuery et je pense être proche d'une solution avec ce code testé sur JSFiddle

$("span.checked").parentsUntil("ul").css({"color":"white","background-color":"black"});

Mais pour le moment dans prestashop je ne sais pas encore ou l'intégrer, je cherche !

[slykereven]

Ok, j'ai un code qui fonctionne, je l'ai mis dans le fichier product.js

$(document).ready(function () {
/*disable clickable attributes if there is no stock*/
    if (globalQuantity === 0) {
        $('fieldset').prop({
            disabled: true
        });
/*change the css styles + a background image for disable clickable attributes*/
        $('input:radio').closest("label").css({
            'color': 'grey',
            "background-image": 'url(/img/background_btn_cart.png)',
			'font-weight':'normal',
			'cursor': 'pointer'
        });
    } else {
/*change the css styles + a background image for all attributes*/
        $('input:radio').closest("label").css({
            "color": "black",
            "background-image": 'url(/img/background_btn_cart.png)',
			'font-weight':'normal',
			'cursor': 'pointer'
        });
/*change the css styles + a background image for the checked attribute*/
        $(':checked').closest("label").css({
                "color": "white",
                "background-color": "black",
                "background-image": "none",
				'font-weight':'normal',
				'cursor': 'pointer'
            });
/*function on click to have unchecked + css styles and have one checked + css styles*/
        $('input:radio').click(function () {
/*unchecked*/
            $('input:radio').closest("label").css({
                "color": "black",
                "background-image": 'url(/img/background_btn_cart.png)',
				'font-weight':'normal',
				'cursor': 'pointer'
            });
/*one checked*/
            $(this).closest("label").css({
                "color": "white",
                "background-color": "black",
                "background-image": "none",
				'font-weight':'normal',
				'cursor': 'pointer'
            });
        });
    }
});

Je pense qu'il peut être meilleur, surement des doublons avec le css aussi et pas de rollover.

Pour le tag 'label', il me semble qu'il n'est pas dans le fichier original et que je l'ai ajouté dans le fichier product.tpl

<ul>
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li>
	<label ><input type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />
	<span>{$group_attribute|escape:'html':'UTF-8'}</span></label>
</li>
{/foreach}
</ul>

Mais pour moi ça marche bien maintenant