CODEWITHSUNDEEP
c#radio-buttonrazor-pagesasp.net-core-2.2
user7849697
user7849697

Reputation: 597

Can't select a Radio button in a Razor page

I have a razor page with 2 radio buttons. But I can't check one of them...

<div class="custom-control custom-radio">
    <input type="radio" asp-for="@Model.ActionNeeded" value="Yes" class="custom-control-input"  name="radio-stacked" required>
    <label class="custom-control-label">Yes</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" asp-for="@Model.ActionNeeded" value="No" class="custom-control-input"  name="radio-stacked" required>
    <label class="custom-control-label">No</label>
</div>

enter image description here

What am I missing?? It's a simple thing but can't have it working...

Upvotes: 0

Views: 1014

Answers (2)

Andr&#233; Sanson
Andr&#233; Sanson

Reputation: 440

asp-for="@Model.ActionNeeded" is generating the same id for both radios.

Create a different id for each radio and add a for="" in the label

<div class="custom-control custom-radio">
    <input type="radio" id="ActionYes" value="Yes" class="custom-control-input"  name="ActionNeeded" required>
    <label for="ActionYes" class="custom-control-label">Yes</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" id="ActionNo" value="No" class="custom-control-input"  name="ActionNeeded" required>
    <label for="ActionNo" class="custom-control-label">No</label>
</div>

Upvotes: 2

Ahmed Msaouri
Ahmed Msaouri

Reputation: 316

You have both buttons with the same name, and that makes you lose a value of them:

name="radio-stacked"

Upvotes: 1

Related Questions