Question

I’m using some simple jQuery to be able to slideToggle a series of nested < ul >
This is working fine, however, if I have checkboxes in my < li > elements, the cannot be checked

I have the following jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('.toggle li:has(ul)').click(function (event) {
            $(this).css('list-style-type', $(this).children().is(':hidden') ? 'circle' : 'square')
            $(this).children().slideToggle('fast')
            return false
        })

        .css({ cursor: 'pointer', 'list-style-type': 'circle' })
        //show to start with
        .children().show()

        $('li:not(:has(ul))').click(function (event) { return false })
    })
</script>

This is applied to my HTML:

<h1>
    Toggle</h1>
<ul class="toggle">
    <li><a href="#">Item 1</a></li>
    <li>Item 2
        <ul>
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
</ul>
<ul class="toggle checkboxes">
    <li><a href="#">Item 1</a></li>
    <li>Item 2
        <ul>
            <li>
                <input type="checkbox" name="chk1" /><label for="chk1">Red (86)</label></li>
            <li>
                <input type="checkbox" name="chk2" /><label for="chk2">Yellow (86)</label></li>
            <li>
                <input type="checkbox" name="chk3" /><label for="chk3">Green (173)</label></li>
        </ul>
    </li>
</ul>

Both lists slide as expected, however, the checkboxes in the second list do not check.. nothing happens.

I think it is something to do with my click event in my jQuery, but I’m not sure how to fix it.

I’m using some CSS (pretty sure this isn’t the cause of it)
The css mainly prevents icons / style-types being shown on the list containing checkboxes.

<style type="text/css">
    ul { list-style-type: circle; margin-left: 10px; margin-top: 10px; }
    .checkboxes ul { margin-left: 0px; list-style-type: none; }
    ul a { font-weight: normal; text-decoration: none; }
    ul a:hover { text-decoration: underline; }
</style>

If there are better ways of doing this, I’m all ears

Answer 1

Change

 $('li:not(:has(ul))').click(function (event) { return false }) 

to

 $('li:not(:has(ul))').click(function (event) { 
  event.stopPropagation();
 }) ;

Check this article on why should you stop using return false in the vent handlers.

http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

An excerpt from the article:

What return false is really doing First off, return false is actually
doing three very separate things when you call it:

1.event.preventDefault();
2.event.stopPropagation();
3.Stops callback execution and returns immediately when called.