无法选中ASP.NET Core MVC视图中的复选框

我目前正在研究ASP.NET Core 3.1 MVC应用程序。我需要创建一个动态复选框菜单，该菜单显示可用水果并将所选水果存储到另一个数据源中。

我的问题是，我无法选中/单击视图上的任何复选框，然后将所选项目发送回控制器。

我的FruitsViewModel看起来像这样：

public class FruitsViewModel
{
    public IList<string> SelectedFruits { get; set; } = new List<string>();

    public IList<SelectListItem> AvailableFruits { get; set; } = new List<SelectListItem>();
}

我的FruitsController看起来像这样：

public class FruitsController : Controller
{
    [HttpGet]
    public async Task<IActionResult> Index()
    {
        var viewModel = new FruitsViewModel { 
                                                  AvailableFruits = GetAvailableFruits()
                                                };

        return View(viewModel);
    }

    [HttpPost]
    public async Task<IActionResult> Index(FruitsViewModel fruitsViewModel)
    {
        // ... process data
    }

    private IList<SelectListItem> GetAvailableFruits()
    {   
        // the values are originally retrieved from a DB, here I use just sample data   
        return new List<SelectListItem>
                       {
                           new SelectListItem {Text = "Apple", Value = "Apple"},
                           new SelectListItem {Text = "Pear", Value = "Pear"},
                           new SelectListItem {Text = "Banana", Value = "Banana"},
                           new SelectListItem {Text = "Orange", Value = "Orange"},
                       };
    }
}

我的FruitsController Index.cshtml视图如下所示：

<form method="post">
    <div class="form-group row">
        <!-- Fruits -->
        <label class="col-4">Fruits</label>
        <div class="col-8">
            @foreach (SelectListItem availableFruit in Model.AvailableFruits)
            {
                <div class="custom-control custom-checkbox custom-control-inline">
                    <label class="custom-control-label">
                        <input type="checkbox"
                               class="custom-control-input"
                               name="SelectedFruits"
                               value="@availableFruit.Value"
                               @if (Model.SelectedFruits.Contains(availableFruit.Value))
                               {
                                   @:checked
                               }/>
                        @availableFruit.Text
                    </label>
                </div>
            }
        </div>
    </div>
    <div class="form-group row">
        <div class="offset-4 col-8">
            <button name="submit" type="submit" class="btn btn-info">Send</button>
        </div>
    </div>
</form>

您是否知道如何检查一个在ASP.NET Core MVC视图上动态加载的复选框，然后将所选值发送回控制器？

如果可能的话，我不想使用jQuery。

我已经关注了这个类似的帖子。