How to Disable/Enable a Dropdown with JavaScript?

To disable or enable a dropdown in JavaScript we use the disabled property. If the disabled property is set to true, the dropdown becomes disabled and if it is set to false, the dropdown becomes enabled.

We will make use of this concept to disable/enable our dropdown.

The following example disables/enables a dropdown having an id myDropdown:

Example:

// Disable the dropdown
document.getElementById('myDropdown').disabled = true;

// Enable the dropdown
document.getElementById('myDropdown').disabled = false;

The disabled property can also be used to check if the dropdown is currently disabled or enabled.

If the disabled property returns a true value, it means the dropdown is disabled otherwise it’s enabled.

See the following working example:

Example:

const dropdown = document.getElementById('myDropdown');

function isDisabled(){
    if(dropdown.disabled == true){
        alert('Dropdown is disabled');
    }else{
        alert('Dropdown is enabled');
    }
}