Enable and Disable a Checkbox with JavaScript

The disabled property controls whether a checkbox can be interacted with. Set it to true to disable the checkbox and false to enable it.

const checkbox = document.getElementById("ck1");
checkbox.disabled = true;
checkbox.disabled = false;

The disabled Property Top ↑

const checkbox = document.getElementById("ck1");
console.log(checkbox.disabled);
checkbox.disabled = !checkbox.disabled;

Enable or Disable from Buttons Top ↑

const checkbox = document.getElementById("ck1");
document.getElementById("disableButton").addEventListener("click", () => {
  checkbox.disabled = true;
});
document.getElementById("enableButton").addEventListener("click", () => {
  checkbox.disabled = false;
});

This preserves the original chk_control() purpose while using event listeners. The form element by ID tutorial explains getElementById().

disabled Is Different from checked Top ↑

checked means selected. disabled means unavailable for interaction. A checkbox can be both checked and disabled.

checkbox.checked = true;
checkbox.disabled = true;

Disabled Checkboxes and Form Submission Top ↑

Disabled controls are normally omitted from submitted form data. Do not disable a checkbox if the server must still receive its value.

Use Disabled State Carefully Top ↑

Disable an option only when it is genuinely unavailable, and explain the reason nearby when users need that context.

Checkbox validation · JavaScript basics

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: