Deleting / adding an attribute leads to deleting all <options> in <select> - html

Question

I try to remove / add the required attribute when I click on the checkbox. I have a problem with this script below:
$(document).on("click", "#billing_as_shipping", function() {
if ($("#billing_as_shipping").is(":checked")) {
$("#wrap-shipping-adress .addRequired").each(function() {
$(this).html($(this).prop('required', false));
});
} else {
$("#wrap-shipping-adress .addRequired").each(function() {
$(this).html($(this).prop('required', true));
});
}
});
<input type="checkbox" id="billing_as_shipping" name="billing_as_shipping">
<div id="wrap-shipping-adress">
<select id="state" name="state" class="form-select addRequired" required>
<option value="">Choose country</option>
<option value="1" selected>Czech Republic</option>
<option value="2">Slovakia</option>
<option value="85">Algeria</option>
<option value="94">Argentina</option>
<option value="68">Armenia</option>
<option value="5">Australia</option>
<option value="33">Austria</option>
<option value="56">Azerbaijan</option>
<option value="45">Belarus</option>
<option value="6">Belgium</option>
<option value="91">Bolivia</option>
</select>
</div>
When I run the script it remove/ add atribute "required", but in case element <select> it delete all <options>. I tried to use it in each function :not, but it didn't work and all <options> disappeared.

Answer 1

With .html(), you are replacing whole html inside select tag, so .html() is not required. You can handle solution without .each() also. Better solution is:
$(document).on("click","#billing_as_shipping", function(){
if($("#billing_as_shipping").is(":checked")){
$("#wrap-shipping-adress .addRequired").prop('required',false);
}else{
$("#wrap-shipping-adress .addRequired").prop('required',true);
}
});

Answer 2

You don't need to call .html() just write:
$(this).prop('required',true))