Question

I have this iPhone like checkbox script, which makes “beautiful” checkboxes. The code is like this:

$(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);
    });
});

And the HTML:

Yes
No

New personal message

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

The problem here is, that only the FIRST part of the html (the first checkbox) works. The rest, the checkbox is not checked.

I guess it have something to do with the jQuery code, I am just not sure what.

Thanks in advance.

Answer 1

The problem you have is that including a <div> element inside a <p> element isn’t valid, so the browser is rendering them as siblings rather than rendering the <div> as a descendent of the <p> element. Then, obviously, your jQuery code doesn’t find the <input> element, and the value never gets changed.

Simply removing the <div> element and applying the style="display:none;" attribute to the <input> element directly fixes the problem.

Working DEMO