JavaScript - dynamically disable checkbox on click

0 points
Created by:

In this article, we would like to show you how to dynamically disable checkbox element on click using JavaScript.

Quick solution:

const myElement = document.querySelector('#my-checkbox');
myElement.disabled= false;


Practical example

In this example, we get HTML input element (checkbox) by id using document.querySelector(), then we set the disabled property inside the functions that we assign to the button elements.

// ONLINE-RUNNER:browser;

<!doctype html>
  <input type="checkbox" id="option" />
  <button  id="button1" onclick="disable()">disable</button>
  <button  id="button2"  onclick="enable()">enable</button>
    function disable() {
      const myElement = document.querySelector('#option');
      myElement.disabled= true;

    function enable() {
      const myElement = document.querySelector('#option');
      myElement.disabled= false;


  1. Document.querySelector() - Web APIs | MDN
  2. HTMLSelectElement.disabled - Web APIs | MDN
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂