Blazor中实现复选框最多选中3个的功能方案问询

要实现最多选中3个复选框的限制，需要同步复选框UI状态与选中数据，并在选中逻辑中添加数量校验和提示，具体实现如下：

1. 绑定复选框选中状态 #

让复选框的选中状态与SelectedItems集合关联，确保UI和数据状态一致：

@foreach (var option in ListItems) { 
    <input type="checkbox" 
           checked="@SelectedItems.Contains(option)" 
           @onchange="()=>GetSelectedCheckbox(option)" /> 
    @option.CheckboxName
}

2. 注入IJSRuntime实现弹窗提示 #

Blazor需通过JSInterop调用浏览器原生弹窗，在组件顶部注入：

@inject IJSRuntime JSRuntime

3. 修改选中事件逻辑 #

在选中方法中添加数量判断，达到上限时阻止选中并弹出提示：

@code {
    [Parameter]
    public List<ListItem> ListItems{ get; set; }

    [Parameter]
    public List<ListItem> SelectedItems { get; set; }

    [Parameter]
    public EventCallback<List<ListItem>> SelectedItemsChanged { get; set;}

    // 初始化集合避免空引用
    protected override void OnInitialized()
    {
        SelectedItems ??= new List<ListItem>();
    }

    private async Task GetSelectedCheckbox(ListItem item)
    {
        if (SelectedItems.Contains(item))
        {
            SelectedItems.Remove(item);
            await SelectedItemsChanged.InvokeAsync(SelectedItems);
        }
        else
        {
            // 判断是否达到最大选中数
            if (SelectedItems.Count >= 3)
            {
                await JSRuntime.InvokeVoidAsync("alert", "不能选择超过3个");
                return;
            }
            SelectedItems.Add(item);
            await SelectedItemsChanged.InvokeAsync(SelectedItems);
        }
    }
}

4. 优化ListItem的相等性判断（可选） #

如果ListItem是自定义类，默认Contains基于引用判断。若需按属性（如CheckboxName）匹配项，需重写相等判断方法：

public class ListItem
{
    public string CheckboxName { get; set; }

    public override bool Equals(object obj)
    {
        return obj is ListItem item && CheckboxName == item.CheckboxName;
    }

    public override int GetHashCode()
    {
        return HashCode.Combine(CheckboxName);
    }
}

核心逻辑说明 #

• 复选框checked属性绑定SelectedItems.Contains(option)，确保UI始终与选中集合同步
• 选中新项前校验数量，达到上限时仅弹窗提示，不执行添加操作，复选框保持未选中状态
• 初始化SelectedItems避免空引用异常

内容的提问来源于stack exchange，提问作者Nit_16