semantic ui how to enable or disable a dropdown with javascript

Question

I have some dropdown boxes in my webpage. I want user to select them one by one, update next dropdown options based on this dropdown selected option. I use semantic ui so it looks better and have a searching function. I know semantic ui have a class to make dropdown disabled.

My problem is how can i enable or disable the dropdowns with javascript. I tried adding or removing the class, but it does not work. or it is not possible to do that?

<select name="subject" id="subject" class="ui search dropdown disabled" >
    <option value="">Subject</option>
</select>

$('#subject').removeClass('disabled');

Answer 1

The jquery way works. here is an example...

$('.dropdown').dropdown();

$('.ui.dropdown').addClass("disabled");

https://jsfiddle.net/anwar3606/n31xsjzn/

Answer 2

If in case anybody wanted to enable dropdown which was disabled

To disable dropdown

$('.ui.dropdown').addClass("disabled");

To enable dropdown back

$('.ui.dropdown').removeClass("disabled");