单选按钮默认情况下，当检查属性设置为false检查? [英] Radio button is checked by default when checked property is false?

问题描述

我正在尝试生成单选按钮，有条件地检查选中的属性(如果数据库中存在该值)，则应将其选中，否则选中的属性为false.因此最初数据库中没有行，并且所有单选按钮的checked属性也为false，但是仍然在UI上选中了它，请参见下图

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; }
}

查看

@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>

推荐答案

通过检查单选按钮的checked属性行为，我发现出现问题是因为checked属性是一个布尔型属性，当该属性存在时表示选中了相应的输入元素状态，无论其值如何(checked="false"与checked="true"或checked="checked"相同).

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").

如果同一组中的多个单选按钮都具有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 };
        }
    }
}

然后在RadioButton helper内部调用该内联函数，如下所示:

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>
}

此后，所有将CompanionReleaseRadio1.Checked属性设置为false的单选按钮应设置为未选中状态(请参见此小提琴以获得预期的结果.

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

参考:

在带有Razor语法的ASP.NET页面中使用@functions

相关问题:

如何在cshtml模板中创建函数?

asp.net mvc3根据模型检查单选按钮

这篇关于单选按钮默认情况下，当检查属性设置为false检查?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！