Make li select checkbox

I've got a script which checks a checkbox when the span of an li is clicked. My problem is that the width of the li is longer than the span and therefore, part of the li doesn't check the checkbox.

HTML

<ul class="myclass">
    <li><input type="checkbox"><span>some text</span></li>
    <li><input type="checkbox"><span>some text</span></li>
    <li><input type="checkbox"><span>some text</span></li>
</ul>

CSS

.myclass li span {
  margin-left: 5px;   
}

li {
  background: red;
}

JAVASCRIPT

$('ul.myclass li span').click( function() {
    var $cb = $(this).parent().find(":checkbox");
    if (!$cb.prop("checked")) {
        $cb.prop("checked", true);
    } else {
        $cb.prop("checked", false);
    }
});

JsFiddle: http://ift.tt/1SGWDKI