How to make the @Html.EditorFor Disabled

Question

I have the following inside my asp.net mvc web application :-

<div><span class="f">Data Center Name</span> @Html.EditorFor(model => model.Switch.TMSRack.DataCenter.Name, new  { disabled = "disabled" })</div>

but the field will not be disabled ,, can anyone adivce please? THanks

Distribution

From MVC 5.1 onwards @Html.EditorFor(model => model.Property, new { htmlAttributes = new { @disabled= "disabled" }}) – Eleanoraeleanore

If you are using asp core, I explained a solution here: https://mcmap.net/q/272226/-mvc3-editorfor-readonly – Alkalimeter

Answer 1

@Html.EditorFor() does not have an overload to support htmlAttributes. You could try @Html.TextBoxFor()

@Html.TextBoxFor(model => model.propertyName, new {disabled= "disabled" })

If you are using system key words such as class in htmlAttributes please add @ before the attribute name.

Ex:

@Html.TextBoxFor(model => model.propertyName, new {@class = "disabledClass" })

Schram

worked with both class and TextBoxFor: @Html.TextBoxFor(model => model.Doctor.Label1, new { @class = "form-control", disabled = "disabled" }) – Fermin

It's not that EditorFor doesn't support html attributes, it's that the viewModels it uses to display the controls don't support it. You can add support in them. – Emanuelemanuela

Answer 2

Using MVC 5, @Html.EditorFor() supports htmlAttributes

@Html.EditorFor(model => model.x, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })

The above example shows how you can add a class and also the disabled attribute

Beguin

how can I make the disabled attribute conditional? – Sullyprudhomme

You can use jQuery to add and remove the disabled attribute with if statements $('.inputDisabled').prop("disabled", false); $('.inputDisabled').prop("disabled", true); – Beguin

@LuisBecerril you could do something like if (@Model.IsReadOnly) { @Html.EditorFor(m => m.x, new { htmlAttributes = ... } else { @Html.EditorFor(m => m.x) }. You'll need a property on the view-model to indicate whether the control should be read-only. – Valli

Just worth mentioning, a disabled field value does not get pass through to the controller. Instead, you would use @readonly = "readonly" – Simpkins

Answer 3

Another alternative: surround the EditorFor with a div or a span with a certain id, and then use a bit of jquery/js:

  <span id="editors">      
        @Html.EditorFor(x => x.ViewModelProperty)
  </span>

    <!-- Disable above editors. EditorFor doesn't allow html attributes unfortunately. -->
    <script type="text/javascript">
        $(function () { $('#editors :input').attr("disabled", true); });
    </script>

Designate

Adding the Javascript part for my code's 'nop-editor' worked for me. $('#DisplayOrderSection :input').attr("disabled", true); – Obstinacy

Answer 4

For those that lose your text value : Disabled fields does not pass its value to the controller. Instead, use @readonly = "readonly"

@Html.EditorFor(model => model.EmployeeCode, new { htmlAttributes = new { @readonly = "readonly", @class = "form-control"} })

Simpkins

Answer 5

If you lose information when you accept the Edit-changes ... You could try

<h3>@Model.x</h3>
@Html.HiddenFor(model => model.x, new { htmlAttributes = new { @class = "form-control" } })

Dispirited

Answer 6

You can also use EditorFor() eg:

@Html.EditorFor(model => model.Nama, new { htmlAttributes = new { @disabled ="true", @class = "form-control" } })

Bautzen