Enable or Disable a Listbox with JavaScript

The disabled property controls whether a select element can be used. Set it to true to disable the list and false to enable it again.

const language = document.getElementById("l1");
language.disabled = true;
language.disabled = false;

The disabled Property Top ↑

A disabled select cannot receive focus or be changed by the user. It is visually disabled by the browser and its value is not submitted with the form.

Enable or Disable from Radio Buttons Top ↑

The original example asks whether the visitor wants to learn web programming languages. Choosing “No” disables the language list; choosing “Yes” enables it.

const list = document.getElementById("l1");
const choices = document.querySelectorAll('input[name="choice"]');

choices.forEach((radio) => {
  radio.addEventListener("change", () => {
    list.disabled = radio.value === "no" && radio.checked;
  });
});

Disabled Controls Are Not Submitted Top ↑

If a control must remain visible but its value still has to be submitted, disabled may not be the correct state. Consider whether the form needs a separate hidden value, a read-only display, or a different interaction.

Usability Notes Top ↑

Keep the label visible, make the reason for disabling the control clear, and avoid disabling choices unexpectedly. When another control changes availability, the relationship should be understandable without relying only on color.

← Listbox

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: