HTML Label not triggering checkbox when it has child content on mobile devices

I have a checkbox which has an attached label for use with a menu.

My label is:

<label for="menu_collapse_icon" class="menu_collapse_icon_label">
    <div class="menu_bar">
        <div class="menu_bar">
            <div class="menu_bar"></div>
        </div>
    </div>
</label>

The issue seems to be the menu bars inside, If I click on the border given to the label it works fine, but if I am clicking the menu bars nothing happens.

Along with a checkbox:

<input type="checkbox" id="menu_collapse_icon">

And the CSS:

.menu_collapse_icon_label {
    width: 33px;
    height: 16px;
    border: 2px solid black;
    @include float-right();
    margin-top: 36px;
    padding: 6px 9px 6px 2px;
    text-align: right;
    display: block;
}
.menu_bar {
    padding-top: 5px;
    width: 80%;
    display: inline-block;
    border-top: 2px solid #454545;
    box-sizing: border-box;
}

To combat this I tried:

jQuery(document.body).on('click touchstart', '.menu_bar', function(e){
    $("#menu_collapse_icon").prop("checked");
});

But no luck, heres a fiddle: http://ift.tt/1Kvgvwb

Note, it works on desktop but not touch devices.