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?

Swig

What is the return type of Model.LinguaMadreList? – Norri

code public IEnumerable<SelectListItem> LinguaMadreList { get; set; } – Swig

Sorry, forgot to also ask what is the type of model.LinguaCodiceMadre? – Norri

No problem ... code [StringLength(10)] public string LinguaCodiceMadre { get; set; } – Swig

Why don't you want to use the disabled attribute? – Cologne

@LeeEnglestone I dont think the OP is saying that, he is saying the disabled attribute is not rendering. – Gaul

@disabled should be disabled . Then it will work fine . #tested – Estrellaestrellita

@Swig does this code render the disabled attribute? @Html.DropDownListFor(model => model.LinguaCodiceMadre,new SelectList(new []{"1","2"}),new {@disabled="disabled"}) – Gaul

@Gaul I tried with @Html.DropDownListFor(model => model.LinguaCodiceMadre,new SelectList(new []{"1","2"}),new {@disabled="disabled"}), but it doesn't work. Html rendered is: <select id="LinguaCodiceMadre" name="LinguaCodiceMadre"> <option>1</option> <option>2</option> </select> – Swig

Can you post your model? – Gaul

Answer 1

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

Swig

what if I also need to give id and class in new { html attributes }, then how it is going to be generic – Piacular

My answer to the same question, which preserves any { html attributes} passed from the HTML/Markup: https://mcmap.net/q/1323461/-disable-enable-dropdownlistfor-based-on-model-property-in-mvc – Attenuate

Answer 2

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

Estrellaestrellita

I confirmed @disabled="disabled" also works with MVC5. – Gaul

w3schools html for dropdown disable w3schools.com/tags/tryit.asp?filename=tryhtml_select_disabled – Estrellaestrellita

Issue still exists. 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. – Swig

Answer 3

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.

Brisance