Knockout radio button "checked" binding isn't working with jQuery Unobtrusive Validation

Question

I've got two radio button groups that are both connected by way of an identical KnockoutJS "checked" binding (like checked: HasPets, checkedValue: true). The first one has an unobtrusive validation message that displays until the user has selected an answer.

The problem is that when I check a radio button on the question which does not have the unobtrusive validation, the field-validation-error does not disappear. Here's an example:

---

Is there anything that I can do to make this validation message disappear?

Also, here is a minimal example of the code used to reproduce the problem:

@model test_mvc_app.Models.TestModel

@using (Html.BeginForm("Pets", "Home", FormMethod.Post, new { id = "petsForm" }))
{
    @Html.LabelFor(m => m.HasPets)
    <div>
        @Html.RadioButtonFor(m => m.HasPets, true, new { @id = "HasPetsTrue", @data_bind = "checked: HasPets, checkedValue: true" })
        <label for="HasPetsTrue">Yes</label>
        @Html.RadioButtonFor(m => m.HasPets, false, new { @id = "HasPetsFalse", @data_bind = "checked: HasPets, checkedValue: false" })
        <label for="HasPetsFalse">No</label>
    </div>
    @Html.ValidationMessageFor(m => m.HasPets)

    <hr/>

    <label>Just to clarify, you're a pet owner, right?</label>
    <div>
        <input data-bind="checked: HasPets, checkedValue: true" type="radio" value="true" >
        <label>Yes</label>
        <input data-bind="checked: HasPets, checkedValue: false" type="radio" value="false" >
        <label>No</label>
    </div>
}

<script>
    $(document).ready(function () {

        var vm = function () {
            var self = this;
            self.HasPets = ko.observable(null);
        }

        var viewModel = new vm();
        ko.applyBindings(viewModel);

        // This makes the validation message appear by default.
        $("#petsForm").valid();
    });
</script>

EDIT: Here is the rendered HTML:

<div>
    <input data-bind="checked: HasPets, checkedValue: true" data-val="true" data-val-required="Please answer this question." id="HasPetsTrue" name="HasPets" type="radio" value="true" aria-required="true" class="input-validation-error" aria-describedby="HasPets-error">
    <label for="HasPetsTrue">Yes</label>
    <input data-bind="checked: HasPets, checkedValue: false" id="HasPetsFalse" name="HasPets" type="radio" value="false" class="input-validation-error">
    <label for="HasPetsFalse">No</label>
</div>

<span class="field-validation-error" data-valmsg-for="HasPets" data-valmsg-replace="true"><span id="HasPets-error" class="">Please answer this question.</span></span>