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?

Duplicate `id` attributes are invalid html. Give each radio button a unique `id`, or remove it using `id=""`, and then give them a class name so that you use $('.yourClassName').change() {` - then refer [this answer](https://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button) for determining which radio button is checked — , Jul 06 '18 at 23:10
And as a side note, you `` elements will not work either - you can use `Yes` — , Jul 06 '18 at 23:12
I was following Bootstrap's radio button placement guide for the labels and inputs: [Bootstrap Guide](http://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios) — Brian Chambers, Jul 09 '18 at 12:02

Brian Chambers · Accepted Answer · 2018-07-09T12:42:38.397

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 { ... }
});

What do you mean when you say they won't work? I'm running my application now and they are displaying the proper text next to the radio buttons. My jQuery change event is firing as expected. Is it invalid HTML or is there something else invalid? I'd like to have clean markup but I can't find anything wrong with it at the moment. — Brian Chambers, Jul 09 '18 at 12:33
Click in the label - it does not set that radio button :) - it needs to be `Yes` (and ditto for the other but change the `for` attribute to `for"AffectsUsersNo"`) - and no `asp-for=".."` — , Jul 09 '18 at 12:35
Oh, I see now! I didn't even notice the labels weren't clickable! Thanks for the tips, Stephen! (I'll edit my answer.) — Brian Chambers, Jul 09 '18 at 12:40

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

1 Answers1