jquery menu checkbox inside of anchor click area

Question

I am using jquery ui menu 1.9. I have list item elements defined as

<li><a href="#"><label><input type="checkbox" value="Seven"/>Seven</label></a></li>

http://jsfiddle.net/fVLv3/1/

My problem is that I cant check or un-check if I click outside the label, only on the label text or the input itself. I'd like to be able to click anywhere on the menu item to trigger the checkbox.

Is there a way to do this with html/css?

I think I can do this in the select event of the menu, but I think that would lead to other problems and I would rather work it out in the markup if possible.

I tried setting the width of the label to 100%, but obviously didnt work. Any ideas?

Answer 1

Try setting the label to display: block; width: 100%;

Answer 2

Add display: inline-block to the label so it picks up the width.