родительская функция jQuery

Question

У меня есть этот iPhone как скрипт флажка, который делает "красивые" флажки. Код такой:

$(document).ready( function(){ 
    $(".cb-enable").click(function(){
        var parent = $(this).parents('.switch');
        $('.cb-disable',parent).removeClass('selected');
        $(this).addClass('selected');
        $('.checkbox',parent).attr('checked', true);
    });
    $(".cb-disable").click(function(){
        var parent = $(this).parents('.switch');
        $('.cb-enable',parent).removeClass('selected');
        $(this).addClass('selected');
        $('.checkbox',parent).attr('checked', false);
    });
});

И HTML: да нет Новое личное сообщение

                <p class="switch"> 
                <label class="cb-enable" ><span>Yes</span></label>
                <label class="cb-disable selected"><span>No</span></label>
                <div style="display:none;"><input type="checkbox" id="checkbox2" class="checkbox" name="notify_on_support" value="1" style="" /></div> 
                <label for="ticketreply" class="label" style="font-size:12px">Reply to support ticket</label><br />                    
                </p>

                <p class="switch"> 
                <label class="cb-enable"><span>Yes</span></label>
                <label class="cb-disable selected"><span>No</span></label>
                <div style="display:none;"><input type="checkbox" id="checkbox3" class="checkbox" name="notify_on_event" value="1" style="" /></div> 
                <label for="nevent" class="label" style="font-size:12px">New Events</label><br />
                </p>

                <p class="switch"> 
                <label class="cb-enable"><span>Yes</span></label>
                <label class="cb-disable selected"><span>No</span></label>
                <div style="display:none;"><input type="checkbox" id="checkbox4" class="checkbox" name="notify_on_pupdate" value="1" style="" /></div>
                <label for="pupdate" class="label" style="font-size:12px">Profile Update</label><br />                 
                </p>
            </div>            

Проблема здесь в том, что работает только ПЕРВАЯ часть html (первый флажок). В остальном флажок не установлен.

Полагаю, это как-то связано с кодом jQuery, я просто не уверен, что.

Заранее спасибо.

Answer 1

У вас проблема в том, что включение элемента <div> в элемент <p> недопустимо, поэтому браузер отображает их как братьев и сестер, а не <div> как потомок элемента <p> , Тогда, очевидно, ваш код jQuery не находит элемент <input>, и значение никогда не изменяется.

Простое удаление элемента <div> и применение атрибута style="display:none;" к элементу <input> напрямую решает проблему.

Рабочая ДЕМО

Answer 2

Я добавил атрибут "for" для ваших ярлыков и немного изменил jQuery:

http://jsfiddle.net/adaz/pHxyw/