How to make error message disappear when Checkbox is Checked

Question

EDIT:

<div class="editor-item">
<label for="Location">Location</label><input class="input-validation-error ui-autocomplete-input" data-jqui-acomp-delay="400" data-jqui-acomp-hiddenvalue="LocationId" data-jqui-acomp-minlength="3" data-jqui-acomp-source="/Loc/Search" data-jqui-type="autocomplete" id="Location" name="Location" type="text" value="123 wrong address" autocomplete="off">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><span class="field-validation-error" data-valmsg-for="Location" data-valmsg-replace="true">Location not found</span></div>

When the user submit the button I'm checking to see if the location is exists and if not then I'm adding in ModelState.AddmodelError

ModelState.AddModelError((LocationViewModel m) => m.Location, "Location not found");

My question is: When the user clicks on Checkbox Create Location How can I make the error disappear?

 <span id="CreateNLocation"   >
    @Html.LabelFor(model => model.CreateLocation, "Create Location")
    @Html.CheckBoxFor(model => model.CreateLocation)
 </span>

Rendered at run time:

<span id="CreateNLocation" style="">
   <label for="CreateLocation">Create Location</label>
   <input data-val="true" data-val-required="The Create new Location field is required." id="CreateLocation" name="CreateLocation" type="checkbox" value="true">

Answer 1

based on your comments to your question

$('#CreateLocation').change(function(){
  if($(this).prop("checked")) {
    $("span[data-valmsg-for='Location']").hide();
  } else {
    $("span[data-valmsg-for='Location']").show();
  }
});

a fiddle