Jeśli div zawiera zaznaczony check to ma inny kolor ramki

0

Dzień dobry wszystkim.
Mam taki problem, z którym nie mogę sobie poradzić.

Poniżej mam 3 boxy z inputami. I chciałbym zrobić w ten sposób: jeśli input jest zaznaczony to nadrzędny div.box (ten co zawiera zaznaczony input) ma kolor ramki np. czerwony.
Jeśli zostanie odznaczony to kolor ramki usuwa się.

<div class="box">
    <div class="dor">
         <div class="radio" id="uniform-option_0_0">
               <span class="checked">
                    <input id="delivery_option_0_0" class="kos" type="radio" name="kos[0]" data-key="32," data-id_address="0" value="32," checked="checked">
               </span>
        </div>
    </div>
</div>
<div class="box">
    <div class="dor">
         <div class="radio" id="uniform-option_0_1">
               <span class="checked">
                    <input id="delivery_option_0_1" class="kos" type="radio" name="kos[0]" data-key="32," data-id_address="0" value="32," checked="checked">
               </span>
        </div>
    </div>
</div>
<div class="box">
    <div class="dor">
         <div class="radio" id="uniform-option_0_2">
               <span class="checked">
                    <input id="delivery_option_0_2" class="kos" type="radio" name="kos[0]" data-key="32," data-id_address="0" value="32," checked="checked">
               </span>
        </div>
    </div>
</div>

Próbowałem w ten sposób jednak ten kod "nie odznacza" koloru ramki.

	$(document).on('click', '.delivery_option_radio',function(e){
		e.preventDefault();
		$('div.box:has(span.checked)').css('border','1px solid red');
	});

Wiecie jak rozwiązać ten problem ?

0

Zrób sobie klasę w css zawierającą kolor bordera i póżniej napisz kod js/jquery, który dodaje i odejmuje tę klasę, np za pomocą toggle

0

Wrzuć kod na http://jsfiddle.net to pogadamy ;) Porada podana we wcześniejszym poście jest bardzo trafna, pozostaje pytanie czy sam umiesz to ogarnąć, czy trzeba jest Ci w tym pomoc.

2
$('input.checkbox').click(function() {
    var self = $(this);

    if (self.is(':checked')) {
        self.parent().addClass('border-red');
    } else {
        self.parent().removeClass('border-red');
    }
});
0

@arczinosek: super, dziękuję za pomoc.

1 użytkowników online, w tym zalogowanych: 0, gości: 1