Disabled dropdown option didn't work in semantic UI

Question

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?

Answer 1

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');

});