Is there a way to convert a fieldset containing a legend and a list of checkboxes/radio buttons into a select HTML element? It might sound like an unusual request, but unfortunately, it's something I need to accomplish.
I have created a jsfiddle for reference: https://jsfiddle.net/demj49st/
The main issue I am encountering is replicating the click behavior of a select element. I am struggling to find the correct selector that will prevent the fake select box from disappearing when a checkbox is clicked.
(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);