如果我选中的国家/地区处于非活动状态，我希望将其设置为活动状态.但我不知道怎么做，这是我的代码.
PS:我现在用的是手机，所以这个片段是没有用的.对于那些通过代码片段提取我的代码的人来说，我非常感激.
这是一个例子，因为唯一的问题是如果单击相应的元素或div，如何创建任何函数.例如，如果我选中第二格中的复选框，则只有第二格中发生了一些事情.然后如果我没有判断其他div，它什么也没有发生或影响.
const Countries = ["Philippines", "New York", "Singapore"];
function createList() {
const liTag = $('.Handler');
for (let i = 0; i < Countries.length; i++) {
const List = `
<ul id="CountryList">
<li>
<div class="NameOfCountry">
<input type="checkbox" class="Check">
<p class="CountryName">Hello</p>
<p class="InActive">Inactive</p>
</div>
</li>
</ul>
`;
var elem = $(List);
elem.find('.CountryName').html(Countries[i]);
elem.find('.Check').change(function() {
//Create a code that if the checkbox is Check, the word inactive makes Active on Respective Element.
})
liTag.append(elem);
}
}
createList();* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box
}
body {
background: #40fff5;
}
.Handler {
width: 100%;
padding: 12px;
}
ul li {
list-style: none;
}
.NameOfCountry {
background: blue;
width: 100%;
display: flex;
justify-content: space-between;
gap: 6px;
border-radius: 8px;
align-items: center;
padding: 8px;
margin-top: 6px;
}
.CountryName {
color: white;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
}
.InActive {
background: white;
border-radius: 5px;
color: red;
font-size: 11px;
font-weight: bold;
width: 30%;
padding: 5px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Handler"></div>