How do model bound Boolean radio buttons work in .NET Core?

Question

I'm having trouble binding a Boolean view model property to a radio button in .NET Core using tag helpers.

<fieldset class="form-group">
    <div class="row">
        <label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
        <div class="col-sm-10">
            <div class="mt-2">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" asp-for="AffectsUsers" type="radio" value="true" />
                    <label class="form-check-label" asp-for="AffectsUsers">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" asp-for="AffectsUsers" type="radio" value="false" />
                    <label class="form-check-label" asp-for="AffectsUsers">No</label>
                </div>
            </div>
            <span asp-validation-for="AffectsUsers" class="text-danger"></span>
        </div>
    </div>
</fieldset>

I have a jQuery change event bound to the radio buttons based on ID.

$('#AffectsUsers').change(function() {
   if (this.value === 'true') { ... } else { ... }
});

The event only being called for the first radio button. I assume it's because I'm using radio button tag helpers, which are creating multiple inputs with the same ID.

How can I bind the Boolean in my view model to the radio buttons so that the change event will respond appropriately based on the value of the control?

Answer 1

I first overrode the ID like Stephen suggested to ensure valid HTML. Also, I set the "for" tag instead of the "asp-for" tag and changed the ID to reference the specific radio button it links to.

<fieldset class="form-group">
    <div class="row">
        <label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
        <div class="col-sm-10">
            <div class="mt-2">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="AffectsUsersYes" asp-for="AffectsUsers" type="radio" value="true" />
                    <label class="form-check-label" for="AffectsUsersYes">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="AffectsUsersNo" asp-for="AffectsUsers" type="radio" value="false" />
                    <label class="form-check-label" for="AffectsUsersNo">No</label>
                </div>
            </div>
            <span asp-validation-for="AffectsUsers" class="text-danger"></span>
        </div>
    </div>
</fieldset>

Then I used the name of the radio button instead of the ID in my jQuery:

$('input[type=radio][name=AffectsUsers]').change(function() {
    if (this.value === 'true') { ... } else { ... }
});