44

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

2
  • 14
    From MVC 5.1 onwards @Html.EditorFor(model => model.Property, new { htmlAttributes = new { @disabled= "disabled" }}) Apr 7, 2015 at 9:36
  • If you are using asp core, I explained a solution here: stackoverflow.com/a/44639822/6339469
    – HamedH
    Jun 19, 2017 at 21:00

6 Answers 6

69

@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" })
2
  • 1
    worked with both class and TextBoxFor: @Html.TextBoxFor(model => model.Doctor.Label1, new { @class = "form-control", disabled = "disabled" })
    – MoniR
    Nov 13, 2016 at 3:44
  • 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.
    – John Lord
    Jun 4, 2019 at 14:41
42

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

4
  • how can I make the disabled attribute conditional?
    – luisgepeto
    May 29, 2017 at 23:21
  • You can use jQuery to add and remove the disabled attribute with if statements $('.inputDisabled').prop("disabled", false); $('.inputDisabled').prop("disabled", true);
    – SaadK
    May 30, 2017 at 0:59
  • @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.
    – David
    Aug 11, 2020 at 18:33
  • Just worth mentioning, a disabled field value does not get pass through to the controller. Instead, you would use @readonly = "readonly"
    – PKirby
    Nov 6, 2020 at 7:15
9

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>
1
  • Adding the Javascript part for my code's 'nop-editor' worked for me. $('#DisplayOrderSection :input').attr("disabled", true);
    – DaminiVyas
    Aug 4, 2020 at 7:00
6

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"} })
4

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" } })
3

You can also use EditorFor() eg:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.