Disabled DropDownList razor mvc

Question

In my razor view, I use a drop down list. I want to have this control disabled (not selectable).

My code is:

<div class="field-list">@Html.DropDownListFor(model => model.LinguaCodiceMadre, Model.LinguaMadreList, new{ @disabled = "disabled" })</div>

But it doesn't work, my control is always enabled. Html page code is:

<select name="LinguaCodiceMadre" id="LinguaCodiceMadre" data-val-length-max="10" data-val-length="The field LinguaCodiceMadre must be a string with a maximum length of 10." data-val="true">
    <option></option>
    <option value="sq">Albanian</option>
    <option value="de">German</option>
    <option value="en">English</option>
    <option value="fr">French</option>
    <option value="it">Italian</option>
    <option value="pt">Portuguese</option>
    <option value="ru">Russian</option>
    <option value="es">Spanish</option>
</select>

without the "disabled" attribute.

My real goal is to enable/disable dropdown conditionally, something like this:

<div class="field-list">@Html.DropDownListFor(model => model.LinguaCodiceMadre, Model.LinguaMadreList, new{@disabled=Model.IsDisabled ? "disabled" : "false"})</div>

but it doesn't work.

I tried both with

new{@disabled=Model.IsDisabled ? "disabled" : "false"}

and

new{disabled=Model.IsDisabled ? "disabled" : "false"}

but nothing, disabled attribute is not rendering on html page.

Anyone has an idea?

Answer 1

Just a small correction . Try this

<div class="field-list">@Html.DropDownListFor(model => model.LinguaCodiceMadre, Model.LinguaMadreList, new{ disabled = "disabled" })</div>

This will surely disable your Drop-down ..

well other alternative is using jquery :

declare @Id for your control later do something like this

$("#youid").prop("disabled", true); 

Finally try this : If this wont work means problem from your side

<div class="field-list">@Html.DropDownListFor(model => model.LinguaCodiceMadre, Model.LinguaMadreList,String.Empty, new{ disabled = "disabled" })</div>

Regards

Answer 2

First, If you want to Enable/Disable DropDown List based on user input, You need to use javascript to Enable/Disable Drop Down List.

For Javascript Use Following Logic :

$("#checkbox1").change(function () {

  if (document.getElementById("checkbox1").checked == true) {

     document.getElementById("DropDown1").disabled = true;
  }
  else {

     document.getElementById("DropDown1").disabled = false;
  }

});

Here is Fiddle Demo that I tried for you which is worling Perfectly

Fiddle Demo

1. I have model with two Properties
2. I am populating Test Data in DropDown in Controller For Demo Purpose(In your case it will come from Database)
3. On the View, I am assigning IDs to both Inputs.
4. And at Last, In the view Below there is Javascript Function that is driving CheckBox to see wether is checked or no, If It is Checked, You can not select any Values from DropDown else it is open to Select Values.

Answer 3

I solved my issue: there was a javascript in my code (I'm sorry, I did not notice right away) deleting disable attribute at document ready.

What I did is:

• creating an extension for HtmlHelper:

---

public static class HtmlExtensions
{
    public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, string optionText, bool canEdit)
    {
        if (canEdit) return html.DropDownListFor(expression, selectList, optionText);
            return html.DropDownListFor(expression, selectList, optionText, new { @disabled = "disabled" });
    }
}

• In razor view:

---

<code><div class="field-list">@Html.DropDownListFor(model => model.LinguaCodiceMadre, Model.LinguaMadreList, "", Model.IsEnabled)</div></code>

This works!

Thanks