Disable an item in the Dropdownlist in my MVC3

Question

I have an MVC3 application. I want to disable a particular item in the dropdown list based on a condition.

@Html.DropDownList("ReportName", Model.ReportTypes, new { style = "color:black; float:left; padding:5px;", @id = "ReportType" })
         @if (Model.numCount > 500)
         { 
          // disable the item whose value = "RC-Report";
         }

Answer 1

Populate a list of SelectListItemExtends, and pass on to ViewBag:

ViewBag.List = new Biz().ListSmall()
                .Select(s => new SelectListItemExtends()
                {
                    Text = s.dsc,
                    Value = s.id,
                    Enabled = s.is_active
                }).ToArray();

In your view use:

@Html.DropDownList("id", ViewBag.List as IEnumerable<SelectListItemExtends>, new { })

Create File HtmlHelperExtensions.cs:

using System.Collections.Generic;
using System.Web.Routing;

namespace System.Web.Mvc.Html
{
    public static class HtmlHelperExtensions
    {
        public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItemExtends> selectList, object htmlAttributes)//, Func<object, bool> ItemDisabled)
        {
            //Creating a select element using TagBuilder class which will create a dropdown.
            TagBuilder dropdown = new TagBuilder("select");
            //Setting the name and id attribute with name parameter passed to this method.
            dropdown.Attributes.Add("name", name);
            dropdown.Attributes.Add("id", name);

            var options = "";
            TagBuilder option;
            //Iterated over the IEnumerable list.
            foreach (var item in selectList)
            {
                option = new TagBuilder("option");
                option.MergeAttribute("value", item.Value.ToString());

                if (item.Enabled == false)
                    option.MergeAttribute("disabled", "disabled");

                if (item.PropExtends != null)
                    option.MergeAttributes(item.PropExtends);

                option.SetInnerText(item.Text);
                options += option.ToString(TagRenderMode.Normal) + "\n";
            }
            //assigned all the options to the dropdown using innerHTML property.
            dropdown.InnerHtml = options.ToString();
            //Assigning the attributes passed as a htmlAttributes object.
            dropdown.MergeAttributes(new RouteValueDictionary(htmlAttributes));
            //Returning the entire select or dropdown control in HTMLString format.
            return MvcHtmlString.Create(dropdown.ToString(TagRenderMode.Normal));

        }
    }
    public class SelectListItemExtends : SelectListItem
    {
        public bool Enabled { get; set; }
        public IDictionary<string, string> PropExtends { get; set; }
    }
}

The Result is:

<select name="id" id="id">
    <option value="430">Object 1</option>
    <option value="5c7" disabled="disabled">Object 2</option>
</select>

Att

Julio Spader

wessolucoes.com.br

Answer 2

Using jQuery

    <select id="theSelect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="500">500</option>
    </select>
    <script type="text/javascript">
    $(function () {
        $('#theSelect option[value=500]').each(function (i, item) {
            item.disabled = true;
        });
    });
</script>

---

UPDATE

Multiple values

    <script type="text/javascript">
    $(function () {
        $('#theSelect option').each(function (i, item) {
          var itemValue = $(item).va();
          if(itemValue == '500' || itemValue == '500_1' || itemValue == '500-1')
            item.disabled = true;
        });
    });
</script>