Radio button is checked by default when checked property is false?

Question

I am trying to generate radio buttons, checking the checked property conditionally if the value exists in database then it should be selected otherwise checked property is false. so initially there are no rows in the database and the checked property is also false for all the radio button but still, it's selected on UI, see below image

So don't know whether it's a default behavior or any bug left, below is my code

ViewModel

public class CompanionProductVersion1ViewModel
{
    [Required(ErrorMessage = "Please select companion release - 1")]
    public string CompanionReleaseRadio1 { get; set; }
    public List<CompanionReleaseRadio1> CompanionReleaseRadios1 { get; set; }
}

public class CompanionReleaseRadio1
{
    public string RadioID { get; set; }
    public string RadioText { get; set; }
    public bool Checked { get; set; }
}

View

@model PlatformLifecyclePortal.Web.ViewModel.CompanionProductVersion1ViewModel

<div class="mt-5">
    <div class="d-flex pb-3">
        <h2>Companion Release - 1</h2>
    </div>

    <div class="border border-dark p-5">
        <div class="row"><h6><b>@Session["Release"]</b></h6></div>
        <div class="row"><p><b>@Session["Feature"]</b></p></div>
        <div class="row">@Html.ValidationMessageFor(m => m.CompanionReleaseRadio1, "", new { @class = "help-block text-danger", @style = "color:red;" })</div>
        <div class="row"><div class="col-sm-9">&nbsp;</div></div>

        <div class="row">

            @using (Html.BeginForm())
            {
                <div class="form-group row">
                    @foreach (var companionReleases1 in Model.CompanionReleaseRadios1)
                    {
                        <div class="col-sm-4">
                            @Html.RadioButtonFor(model => Model.CompanionReleaseRadio1, companionReleases1.RadioID, new { id = "CompanionReleaseRadio2" + companionReleases1.RadioID, @checked = companionReleases1.Checked }) <span class="checkbox-label">@companionReleases1.RadioText</span>
                        </div>
                    }
                </div>

                <div class="row">
                    <div class="col-sm-9">
                        <button type="submit" class="btn btn-primary btn-next">Next</button>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

Answer 1

By inspecting checked attribute behavior for radio button, I found that your problem occurred because checked attribute is a boolean property which when the attribute is present indicates corresponding input element is in checked state regardless of its value (checked="false" is same as checked="true" or checked="checked").

If checked attribute present for multiple radio buttons in the same group, by default it sets last radio button as checked (see this fiddle based on your original code). Therefore, you need to exclude checked attribute when CompanionReleaseRadio1.Checked property set to false by utilizing @functions inline function helper as provided in example below:

@functions {
    private object SetRadioButtonChecked(bool isChecked, string RadioID) 
    {
        // checked state from property
        if (isChecked)
        {
            // checked attribute is present
            return new { id = "CompanionReleaseRadio2" + RadioID, @checked = "checked" };
        }
        else
        {
            // checked attribute is not present
            return new { id = "CompanionReleaseRadio2" + RadioID };
        }
    }
}

Then call that inline function above inside RadioButton helper like this:

@foreach (var companionReleases1 in Model.CompanionReleaseRadios1)
{
    <div class="col-sm-4">
        @Html.RadioButtonFor(model => Model.CompanionReleaseRadio1, companionReleases1.RadioID, 
             @SetRadioButtonChecked(companionReleases1.Checked, companionReleases1.RadioID)) 
        <span class="checkbox-label">@companionReleases1.RadioText</span>
    </div>
}

Afterwards, all of radio buttons with CompanionReleaseRadio1.Checked property set to false should have set in unchecked state (see this fiddle for intended result).

Reference:

Using @functions in an ASP.NET page with Razor Syntax

Related issues:

How to create a function in a cshtml template?

asp.net mvc3 checking radio button based on model