Replicating a select element with a checkbox ul (jQuery)

I'm trying to transform a fieldset with one legend and one UL of checkboxes/radio as a select html element. I know, it sounds bad and doesn't really make sense, but let's just say I have to do it.

I have a jsfiddle http://ift.tt/1Wq7bMi

The problem is that I have some issues replicating the click behavior of the select element. I don't find the right selector to make it so a click on a checkbox wont make the fake select box disappear.

(function($) {

    $(document).ready(function() {

        $('fieldset legend').on('click', function() {
            var $this = $(this);
            $this.toggleClass('active');
            $this.next().toggleClass('visible');
        })


        $(document).on('click', function (e) {
            if($('ul').hasClass('visible') && !$('fieldset legend').is(e.target)) {
                $('ul').removeClass('visible');
                $('legend').removeClass('active');
            }
        });



    })

})(jQuery);