This is my Cshtml
<div class="field">
@Html.LabelFor(modelItem => modelItem.plateNumber)
@Html.DropDownListFor(m => m.plateNumber, new SelectList(ViewBag.PlateNoList, "Value", "Text"),
"", new { Class = "ui selection dropdown document-type" })
</div>
</div>
<div class="field">
@Html.LabelFor(modelItem => modelItem.FuelType)
@Html.DropDownListFor(m => m.FuelType, new SelectList(ViewBag.FuelType,"Value","Text"),
"", new { Class = "ui selection dropdown fuel-type",@id="FuelType"/*, @disabled = "true"*/ })
</div>
This is my JavaScript
document.getElementById("FuelType").disabled = true;
$('#plateNumber').change(function() {
$('.ui.dropdown').dropdown();
document.getElementById("FuelType").disabled = false;
});
When the plateNumber dropdown is selected, the bottom FuelType dropdown should be available, but it cannot be used even though the plateNumber dropdown is selected, any idea?
Try removing the disabled class from the dropdown as well. This is checked (and added) internally by SUI.
document.getElementById("FuelType").disabled = true;
$('#plateNumber').change(function() {
document.getElementById("FuelType").disabled = false;
$('.ui.dropdown').dropdown();
$('.ui.dropdown').removeClass('disabled');
});