Creating a SelectListItem with the disabled=“disabled” attribute

Question

I'm not seeing a way to create, via the HtmlHelper, a SelectListItem that will spit out the following HTML:

<option disabled="disabled">don't click this</option>

The only properties SelectListItem has are:

new SelectListItem{
  Name = "don't click this",
  Value = string.Empty,
  Selected = false
}

The only option I see is to

1. Subclass the SelectListItem to add an Enabled property to get the value to the view
2. Not use the HTML helper for DropDownList
3. Create a new HtmlHelper extension that accepts my new EnablableSelectList and adds my disabled attribute.

Answer 1

This is something I might try before recreating the helper completely. The basic idea is that the Html you get from the helper should be well formed, so it should be safe to parse. So you can build on that idea by making your own extension that uses the existing extension but adds the functionality to disable the items.

Something like this might do (totally untested)

public class CustomSelectItem : SelectListItem
{
    public bool Enabled { get; set; }
}

public static class CustomHtmlHelpers
{
    public static MvcHtmlString MyDropDownList(this HtmlHelper html, IEnumerable<CustomSelectItem> selectList)
    {
        var selectDoc = XDocument.Parse(html.DropDownList("", (IEnumerable<SelectListItem>)selectList).ToString());

        var options = from XElement el in selectDoc.Element("select").Descendants()
                                    select el;

        foreach (var item in options)
        {
            var itemValue = item.Attribute("value");
            if (!selectList.Where(x => x.Value == itemValue.Value).Single().Enabled)
                item.SetAttributeValue("disabled", "disabled");
        }

        // rebuild the control, resetting the options with the ones you modified
        selectDoc.Root.ReplaceNodes(options.ToArray());
        return MvcHtmlString.Create(selectDoc.ToString());
    }
}

Answer 2

The Disabled property is supported since ASP.NET MVC 5.2:

new SelectListItem {
    // ...
    Disabled = true
}

See the API reference.

Answer 3

Clientside option: if you for example give your dropdownlist a class 'custom' and the items that should be unselectable the value -1 (for example), then you can do something like:

$('select.custom option[value=-1]').each(function () {
    $(this).attr("disabled", "disabled");
});

Answer 4

If all you are trying to do is prevent a user from selecting a certain value from the list, it seems like the simpler and more time-efficient way to do it is to use input validation. Which you may quite possibly be doing anyways, if you want to verify they've made a selection to begin with.

Answer 5

-----Option 1 Controller:

var ExpectedShipmentsRange = new List();

ExpectedShipmentsRange.Add(new SelectListItem() { Text = "Selected number of shipments", Value="0", Disabled = true, Selected  = true });
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "0 to 20 shipments", Value = "0-20" });
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "20 to 40 shipments", Value = "20-40" });

ViewBag.ExpectedShipmentsRange = ExpectedShipmentsRange;

View:

@Html.DropDownListFor(m => m.ExpectedShipments, (IEnumerable<SelectListItem>)@ViewBag.ExpectedShipmentsRange, new { @class = "form-control" })

-----Option 2 Controller:

ViewBag.citiesSa = _dbContext.Countries.ToList();

View:

@Html.DropDownListFor(m => m.City, new SelectList(@ViewBag.citiesSa, "Id", "Name"), "Select your city", new { @class = "form-control" })

-----Option 3 does not support disabled option:

List<SelectListItem> ExpectedShipmentsRange = new List<SelectListItem>();
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "0 to 20 shipments", Value = "0-20" });
ExpectedShipmentsRange.Add(new SelectListItem() { Text = "20 to 40 shipments", Value = "20-40" });

ViewBag.ExpectedShipmentsRange = new SelectList(ExpectedShipmentsRange, "Value", "Text");

View:

@Html.DropDownListFor(m => m.ExpectedShipments, (SelectList)@ViewBag.ExpectedShipmentsRange, new { @class = "form-control" })