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

Solution 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

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

Solution 3

If you want to do it in the razor itself, During condition just build the attribute and assign it in the DropDownListConstructor.

  @{

      IDictionary<string, object> attributes = 
         new RouteValueDictionary(
            new { 
       style =  "color:black; float:left; padding:5px;", 
       @id = "ReportType"
     });

     if (Model.numCount > 500)
     { 
      // disable the item whose value = "RC-Report";
         attributes.Add("disabled", "disabled");
     }

  }
 @Html.DropDownList("ReportName", Model.ReportTypes, attributes);

Comments

[BumbleBee]

Thank u. how will the jquery code look like for : if the value is 500 or 500-1 or 500_1 then disable.

[BumbleBee]

Thank u. how can check for multiple ids. Ex : i want to disable the items whose value is rc_report, pc_report, tc-report.

[PSL]

oh you want to disable the option instead of the select dropdown itself?

[BumbleBee]

ya I want to disable few of the items in the drop down list if the condition is met.

[PSL]

oh in that case you can create a custom Helper extension to create the dropdown and in your modal just add a property called disabled which you can set for the option that you intend to before populating... Check this stackoverflow.com/questions/2655035/….

[PSL]

You can look at this. If you want to go with this i can write up one for you... If you go with razor you can directly do a match if not you would need to go with a like match for 500, 500_1 etc in jquery which could be risky...

[BumbleBee]

I would like to go with razor. Pls help me out.

[PSL]

let us continue this discussion in chat

[GeoffM]

Nice. In 4.5 (at least) there is a "Disabled" property of SelectListItem so adding an "Enabled" property is redundant. However, it was useful to see so thanks!

[ishmaelMakitla]

You should really add some explanation as to why this should work - you can also add code as well as the comments in the code itself - in its current form, it does not provide any explanation which can help the rest of the community to understand what you did to solve/answer the question. This is especially important for an older question and the questions that already have answers.