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>

Instead of `.Where(...).Count() > 1 ? true : false` it's better to use `.Any(...)` that would return `true` if there is any... — Sk83r1l4m4, Jan 16 '19 at 06:54

score 5 · Accepted Answer · answered Jan 17 '19 at 02:52

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

score 0 · Answer 2 · answered Jan 16 '19 at 07:11

I have created a windows application and added a RadioButton on Form1. And set the checked property as "fasle" for the radio button. But as per the default behavior of windows application it marked checked at least one radio button.

And once form and its control get loaded it then only we can mark checked = false for the radio button.

In windows application there is a event Shown() for the windows form. So We have code to mark checked = false on the shown event and it is working as expected.

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Shown(object sender, EventArgs e)
    {
        radioButton1.Checked = false;
    }
 }

How do we do it in ASP.NET MVC? OP is referring to a web application. — RBT, Jan 16 '19 at 07:32

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

2 Answers2

Linked