JQuery : check if HTML attr is present in ul list on_change(checkbox)

I'd like to know how I can see if HTML attribute of a checkbox element (like cat here) is in a <ul> list of elements, using JQuery.

// checkbox like so, cat is the string I want
<input type="checkbox" name="country_code" data-cat="city_inf">

// list of elements containing my categories (when one element of it is checked in HTML code)
<ul id="sortable" class="ul_drag_el">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Cat name 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Cat name 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>etc..</li>
</ul>

And another question is, if I wanna count how much elements from a categorie are checked to display/hide li categorie name, should I do a list of every checked element by their name or can I just do a counter (still in JQuery).

For the moment I only have this in JQuery but I'm really lost on how to start.

    $("input[type='checkbox']").change(function(){
        let text_to_append = "<li className='ui-state-default'><span className='ui-icon ui-icon-arrowthick-2-n-'>"
        text_to_append += $(this).attr('name');
        text_to_append += "</span>"

        if(this.checked){
            $('.ul_drag_el').append(text_to_append)
        }  
    })