Disable/Enable Html.EditorFor from selection of Html.DropDownListFor

Question

I am trying to enable/disable a set of EditorFor controls depending on the selection made from a Html.DropDownListFor control.

My drop down has 4 elements in it and I want to enable a set of editor controls when each element in the drop down is selected.

Currently I have the following simple code:

<div id="label-address-type" class="line">
    @Html.BasicLabelFor(m => m.ReturnsLabelAddressType)
    @Html.DropDownListFor(m => m.ReturnsLabelAddressType, new   SelectList(Model.AddressTypeList(Model.ReturnsLabelAddressType), "Value", "Text"))
</div>
<div class="line">
          @Html.BasicLabelFor(m => m.OtherReturnsLabelAddress.AddressLine1)
    @Html.EditorFor(m => m.OtherReturnsLabelAddress.AddressLine1)
</div>
<div class="line">
    @Html.BasicLabelFor(m => m.OtherReturnsLabelAddress.AddressLine2)
    @Html.EditorFor(m => m.OtherReturnsLabelAddress.AddressLine2)
</div>
<div class="line">
    @Html.BasicLabelFor(m => m.OtherReturnsLabelAddress.AddressLine3)
    @Html.EditorFor(m => m.OtherReturnsLabelAddress.AddressLine3)
</div>
<div class="line">
    @Html.BasicLabelFor(m => m.OtherReturnsLabelAddress.AddressLine4)
    @Html.EditorFor(m => m.OtherReturnsLabelAddress.AddressLine4)
</div>
<div class="line">
    @Html.BasicLabelFor(m => m.OtherReturnsLabelAddress.LocationCode)
    @Html.EditorFor(m => m.OtherReturnsLabelAddress.LocationCode)
</div>

Thanks in advance.

Answer 1

You can put an id to your dropdown. And the id of every EditorFor could be the same with the text of the dropdown choice. And thenuse jquery to get the dropdown choice. After that you could disable the editor you want

var selectedOption = $("#yourdropdownid option:selected").text();
$('#'+selectedOption).prop('disabled', true); 

If you are using bootstrap you can do

$('#'+selectedOption).addClass("disabled");