Cannot check checkbox in ASP.NET Core MVC view

I'm currently working on an ASP.NET Core 3.1 MVC application. I need to create a dynamic checkbox menu, which shows available fruits and stores the selected fruits into another data source.

My problem is, I cannot check/click any checkbox on my view and send the selected items back to my controller.

My FruitsViewModel looks like this:

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

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

My FruitsController looks like this:

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

My FruitsController Index.cshtml view looks like this:

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

Do you know how to check a checkbox which is loaded dynamically on a ASP.NET Core MVC view and send the selected value back to the controller accordingly?

If possible I don't want to use jQuery.

I already followed this similar post.