Checkboxes for SelectListItem

Question

.Net Core 2.1

I have a working multi select drop-down list implemented using:

<select class="form-control" asp-for="SelectedItems" asp-items="Model.ItemDropdownOptions" multiple size="20"></select>

The page received the following populated view model:

public class AllocateDocumentViewModel
{
    [DisplayName("Document Id")]
    public Guid DocumentId { get; set; }

    [DisplayName("Document Name")]
    public string DocumentName { get; set; }

    [DisplayName("Document Description")]
    public string DocumentDescription { get; set; }

    [DisplayName("Items")]
    public List<SelectListItem> ItemDropdownOptions { get; set; }

    public Guid[] SelectedItems { get; set; }
}

And my controller receives this model:

public class AllocateDocumentsPostModel
{
    public Guid DocumentId { get; set; }
    public Guid[] SelectedItems { get; set; }
}

My controller looks like this:

[HttpPost]
public async Task<ActionResult> AllocateDocument(AllocateDocumentsPostModel model)
{
 ......
}

This is all working just fine. It allows users to hold the key down and multi select items. It also correctly populates the form with the currently selected items.

But, user feedback is that they want a checkbox next to each item in the list.

I have found a few examples of how to do this with unordered lists but is there a way to somehow do this with the existing select?

Any help would be greatly appreciated.

Nan Yu · Accepted Answer · 2019-04-10T07:35:29.277

You can use pure css to implement that :

CSS:

<style>
    .select-checkbox option::before {
        content: "\2610";
        width: 1.3em;
        text-align: center;
        display: inline-block;
    }

    .select-checkbox option:checked::before {
        content: "\2611";
    }
</style>

Add select-checkbox class name to select in view :

<select class="form-control select-checkbox" asp-for="SelectedItems" asp-items="Model.ItemDropdownOptions" multiple size="20"></select>

But that checkbox is a "fake" checkbox otherwise you add real checkbox controls like here or you can use some plugins like Bootstrap Multiselect .

Checkboxes for SelectListItem

1 Answers1