jQuery diable multiselect drop-down option - html

Question

I got a multi-select drop-down ordered as a like this:
<ul>
<li title="Africa" aria-selected="false">Africa</li>
<li title="Egypt" aria-selected="false">Egypt</li>
<li title="Angola" aria-selected="false">Angola</li>
<li title="Benin" aria-selected="false">Benin</li>
<li title="Asia" aria-selected="false">Asia</li>
<li title="Taiwan" aria-selected="false">Taiwan</li>
<li title="India" aria-selected="false">India</li>
<li title="Thailand" aria-selected="false">Thailand</li>
<li title="Europe" aria-selected="false">Europe</li>
<li title="Denmark" aria-selected="false">Denmark</li>
<li title="Italy" aria-selected="false">Italy</li>
<li title="Spain" aria-selected="false">Spain</li>
</ul>
What I am aiming for is to disable the continents (Africa, Asia, Europe) so that they are not selectable.
I have figured that if I completely remove the aria-selected="false" attribute + value and add aria-disabled="true" for the continents the become un-selectable.
I thought this was the way to do it for a single continent:
(Preferably there should be a more dynamic way so I don't have to repeat this for each continent)
jQuery( document ).ready(function($) {
$("ul li[title='Africa']").removeAttr("aria-selected");
$("ul li[title='Africa']").attr("aria-disabled","true");
});
..but nothing happens. What am I doing wrong?

Answer 1

try this instead,
I created a array for hidden items
var titles= ["Africa", "Asia", "Europe"];
jQuery( document ).ready(function($) {
var titles= ["Africa", "Asia", "Europe"];
for(var i=0;i<=titles.length;i++){
$("ul li[title="+titles[i]+"]").removeAttr("aria-selected");
$("ul li[title="+titles[i]+"]").attr("aria-disabled","true");
}
});
li[aria-disabled="true"]{
color:#888;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li title="Africa" aria-selected="false">Africa</li>
<li title="Egypt" aria-selected="false">Egypt</li>
<li title="Angola" aria-selected="false">Angola</li>
<li title="Benin" aria-selected="false">Benin</li>
<li title="Asia" aria-selected="false">Asia</li>
<li title="Taiwan" aria-selected="false">Taiwan</li>
<li title="India" aria-selected="false">India</li>
<li title="Thailand" aria-selected="false">Thailand</li>
<li title="Europe" aria-selected="false">Europe</li>
<li title="Denmark" aria-selected="false">Denmark</li>
<li title="Italy" aria-selected="false">Italy</li>
<li title="Spain" aria-selected="false">Spain</li>
</ul>