Checkboxes won't select when inside a Collapsed List

Question

I am working on making a list of options that can be selected with checkboxes. Here is a link to the fiddle: http://jsfiddle.net/LESTN/2enter code here

I am able to create functioning checkboxes out side of the list as shown but the checkboxes associated with list elements are not clickable. Any suggestions as to how i can resolve this would be greatly appreciated.

Thanks!

Edit: cleared out the in text code and added a fiddle.

Answer 1

    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })

Remove return false;

http://jsfiddle.net/qdcH7/2/

Also this doesn't look right: <li>Hot Cups<ul>

Also, UL shouldn't be inside a P tag: ul element can never be a child of p element

Answer 2

Okay I was able to replicate the issue. The issue is the return false statement.

    $('#expList').find('li:has(ul)').click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })

When you click a checkbox in the list, the checkbox is considered the event target, but "this" is the actual dropdown eg #expList. It is returning false unless (this == event.target), which is not the case on the checkboxes.

Remove return false, or change the way that if statement handles the value.

Also just as a general rule of thumb, close all your tags and properly indent your html. Your HTML is a bit funky, a lot of it is formatted oddly. Maybe something like this?

<input type="checkbox" />
<div id="listContainer">
    <div id="expList">
        Hot Cups
             <ul>
                <li><input type="checkbox" name="Sample" value="val 1">Title 1</li>
                <li><input type="checkbox" name="Sample" value="val 2">Title 2</li>
                <li><input type="checkbox" name="Sample" value="val 3">Title 3</li>
                <li><input type="checkbox" name="Sample" value="val 4">Title 4</li>
                <li><input type="checkbox" name="Sample" value="val 5">Title 5</li>
                <li><input type="checkbox" name="Sample" value="val 6">Title 6</li>
                <li><input type="checkbox" name="Sample" value="val 7">Title 7</li>
            </ul>
      </div>
    </div>