Enable and Disable a Text Box with a Checkbox

Set a form control's disabled property to true or false when another choice determines whether the control should be available. A common example is enabling an "Other" text box only when the user selects an "Other" checkbox.

const otherCheckbox = document.getElementById("others");
const otherText = document.getElementById("other_text");

otherText.disabled = !otherCheckbox.checked;

Use the disabled Property Top ↑

otherText.disabled = true;  // user cannot edit it
otherText.disabled = false; // user can edit it

The HTML disabled attribute can provide the initial state before JavaScript runs.

Connect the Text Box to a Checkbox Top ↑

<label>
  <input type="checkbox" id="others">
  Other
</label>
<input type="text" id="other_text" disabled>

otherCheckbox.addEventListener("change", () => {
  otherText.disabled = !otherCheckbox.checked;

  if (!otherText.disabled) {
    otherText.focus();
  }
});

Set the Initial State in HTML Top ↑

The older version used a body onload technique to disable the text box. A better default is to include the disabled attribute in the HTML and let JavaScript respond to later changes. This avoids a brief moment where the control is enabled before the script runs.

Control Multiple Optional Fields Top ↑

When several checkboxes each control their own text box, connect them with a data attribute instead of writing a separate function for every pair.

for (const checkbox of document.querySelectorAll("[data-controls]")) {
  checkbox.addEventListener("change", () => {
    const input = document.getElementById(checkbox.dataset.controls);
    input.disabled = !checkbox.checked;
  });
}

The second sitemap demo, multiple enable/disable controls, now demonstrates this pattern without relying on a missing server-side checker endpoint.

disabled vs readonly Top ↑

A disabled control cannot be interacted with and is normally excluded from form submission. A read-only text control can still receive focus and its value is submitted, but the user cannot edit it. Choose based on the behavior you need rather than using the two properties interchangeably.

Related Form-Control Tutorials Top ↑

The original related links are preserved: disable a checkbox, disable a listbox, and disable period/date controls.

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: