bootstrap dropdown with checkbox - jquery event on a called twice

I have the HTML following code:

        <div class="btn-group">
            <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text">select something</span> <b class="caret"></b></button>
            <ul id="some-dropdown" class="multiselect-container dropdown-menu">
                <li><a><label class="checkbox"><input type="checkbox" value="aa"> aa</label></a></li>
                <li><a><label class="checkbox"><input type="checkbox" value="bb"> bb</label></a></li>
            </ul>
        </div>

I tried to prevent the dropdown from closing if one click inside it. (so it will be possible to select checkboxs)

After some search, this javascript code worked:

    $("#some-dropdown a").click(function(ev){
console.log(this);
        $(this).parent().toggleClass("active"); // highlight the selected
        ev.stopPropagation();
    });

The problem is the click event is called twice, hence the highlight wont work (it sets and removes the class).
After some tests (checked the event parameter) I think the label or the input makes the handler called twice. So my question - how can I avoid clicked elements bellow the a element to call the handler (bubbling up)?I only want the event to be called once only for the a that is clicked. If possible, without binding addtional handlers.

some css:

.multiselect-container>li {
    padding: 0;
}
.multiselect-container>li>a {
    padding: 0 !important;
}
.multiselect-container label{
    margin: 0;
}
.multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.multiselect-container>li>a>label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 5px 20px 3px 40px;
}