How to change the li background-color of the attribute of a product which is checked with radio butt

[slykereven]

Hello,

 

How to change the li background-color of the attribute of a product which is checked with radio button.

 

In the example image, the radio buttons are hidden, the hover no problem, I want to keep it that the same as the "hover" but I can not do ...

 

I see <span class="checked">  which moves along the selected attribute, perhaps I imagine trying to have this class in the parent li of the selected radio.

 

If someone has a solution or a track?

 

I hope I was clear enough

 

thank you

 

 

 

[vekia]

perhaps jQuery?

$("span.selected").parent() 

you can do a lot with this :-)

[slykereven]

Yep, i was thinking about jQuery, I will look at it but i'm still a beginner at jQuery ...

thank you Vekia for the track start

 

Edit

 

I think I'm close to a solution with this code, tested on JSFiddle,

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

but I do not know how to embed in prestashop, I try

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

[slykereven]

Okay i have made some working code and put it in the 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'
            });
        });
    }
});

I think it can be better, surely some ccs styles in double, and there is no hover.

For the 'label' tag, i'm not sure but i think is not in the original file and i add it in the product.tpl like the following code

<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>

For now that works fine for me

[lipo999]

Hello,

do have someone solution? With CSS Im able edited attributes radio as button. But its not possible make it styles for checked radio.

 

Thanks