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

shl

2018-09-20T10:32:47+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 152

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

Kopiuj

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

Kopiuj

	$(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 ?

2018-09-20T11:01:38+02:00

Rejestracja: dni
Ostatnio: dni

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

cerrato

2018-09-20T11:10:52+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Poznań
Postów: 9177

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.

arczinosek

2018-09-20T22:12:41+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 86

Kopiuj

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

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