表中的 MudBlazor 复选框彼此独立

Question

我希望用户一次只能检查一个元素。如果他们检查另一个元素，那么该元素就会被检查，任何其他元素都是假的。我正在使用 MudBlazor，我尝试通过一种方法来控制它，但我失败了。

<MudTable T="Element" Items="@Elements" Hover="true">
    <HeaderContent>
        <MudTh>checkbox</MudTh>
        <MudTh>Nr</MudTh>
        <MudTh>Name</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="checkbox">
            <MudCheckBox Value="@context.Checked" T="bool" CheckedChanged="CheckedChanged" Color="Color.Warning" CheckedIcon="@Icons.Material.Filled.PersonPinCircle" UncheckedIcon="@Icons.Material.Outlined.PersonPinCircle"></MudCheckBox>
        </MudTd>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{50, 100}" />
    </PagerContent>
</MudTable>



@code {
    private IEnumerable<Element> Elements = new List<Element>()
    {
        new Element("helium", 1),
        new Element("borium", 45),
        new Element("argon", 346),
        new Element("oxygen", 51),
        new Element("radium", 467),
    };

    protected void CheckedChanged(object sender, EventArgs e)
    {
        // Set every other elements checked to false
        foreach (var item in Elements)
        {
            item.Checked = false;
        }   

        // set this elements checked value to what is is not
        CheckBox3 = !CheckBox3;
    }

    public class Element
    {
        public string Name { get; set; }
        public int Number { get; set; }
        public bool Checked { get; set; }

        public Element(string name, int number)
        {
            Name = name;
            Number = number;
            Checked = false;
        }
    }
}

Answer 1

在 MudButtons、HTML 输入、MudRadio 按钮之间切换后，我发现 MudToggleIconButton 最适合我想要的反应。

<MudTable T="Element" Items="@Elements" Hover="true">
<HeaderContent>
    <MudTh>checkbox</MudTh>
    <MudTh>Nr</MudTh>
    <MudTh>Name</MudTh>
</HeaderContent>
<RowTemplate>
    <MudTd DataLabel="checkbox">
        <MudToggleIconButton Toggled="@context.Checked" ToggledChanged="@(() => Toggle(context))"
                             Icon="@Icons.Material.Filled.PersonPinCircle" Color="@Color.Warning"
                             ToggledIcon="@Icons.Material.Outlined.PersonPinCircle" ToggledColor="@Color.Warning" ToggledTitle="Primary Contact" />
    </MudTd>
    <MudTd DataLabel="Nr">@context.Number</MudTd>
    <MudTd DataLabel="Name">@context.Name</MudTd>
</RowTemplate>
<PagerContent>
    <MudTablePager PageSizeOptions="new int[]{50, 100}" />
</PagerContent>

@代码{

public void Toggle(Element element)
{
    // Set every other elements checked to false
    foreach (var item in Elements.Where(e => e.Name != element.Name))
    {
        item.Checked = false;
    }

    // set this elements checked value to what is is not
    element.Checked = !element.Checked;
}


private IEnumerable<Element> Elements = new List<Element>()
{
    new Element("helium", 1),
    new Element("borium", 45),
    new Element("argon", 346),
    new Element("oxygen", 51),
    new Element("radium", 467),
};



public class Element
{
    public string Name { get; set; }
    public int Number { get; set; }
    public bool Checked { get; set; }

    public Element(string name, int number)
    {
        Name = name;
        Number = number;
        Checked = false;
    }
}

}

此代码允许我在任何时候仅将表中的 1 项设置为 true。并且在任何时候我都可以取消选中唯一检查的值，这样就不会检查任何内容。

https://try.mudblazor.com/snippet/cYwHFmabIssVRpMw