Adhi sankar

Posted on Jul 31

Auto Enable and Disable a Submit Button Using JavaScript

#frontend #html #javascript #tutorial

HTML

<input type="checkbox" id="check"> I agree
<button id="btn" disabled>Submit</button>

Explanation

The checkbox allows the user to agree to the terms.
The button has the disabled attribute, so it is disabled when the page first loads.

JavaScript - Method 1 (Recommended)

const checkbox = document.getElementById("check");
const button = document.getElementById("btn");

checkbox.addEventListener("change", function () {
    button.disabled = !checkbox.checked;
});

Step-by-Step Explanation

Step 1: Select the HTML Elements

const checkbox = document.getElementById("check");
const button = document.getElementById("btn");

document.getElementById() selects HTML elements using their id.

After these two lines:

checkbox refers to the checkbox.
button refers to the Submit button.

Step 2: Listen for Changes

checkbox.addEventListener("change", function () {

What is `addEventListener()`?

addEventListener() tells JavaScript to listen for a specific event on an element.

Syntax

element.addEventListener("event", function);

In our example

Element: checkbox
Event: "change"
Function: Runs whenever the checkbox changes.

Why Use the `"change"` Event?

The "change" event is triggered whenever the checkbox changes its state.

For example:

Action	Checkbox State	`change` Event
User checks the box	Checked	✅ Yes
User unchecks the box	Unchecked	✅ Yes

Every time the checkbox changes, JavaScript executes the function.

Step 3: Enable or Disable the Button

button.disabled = !checkbox.checked;

This single line does all the work.

Let's understand it from right to left.

`checkbox.checked`

The checked property returns a Boolean value.

Checkbox	`checkbox.checked`
Checked	`true`
Unchecked	`false`

The `!` (Logical NOT) Operator

The ! operator reverses a Boolean value.

Original Value	After `!`
`true`	`false`
`false`	`true`

Examples:

!true

Output:

false

!false

Output:

true

`button.disabled`

The disabled property determines whether a button is enabled.

Value	Result
`true`	Button is disabled
`false`	Button is enabled

Putting Everything Together

When the checkbox is checked:

checkbox.checked

returns

true

Then

!true

becomes

false

So JavaScript executes:

button.disabled = false;

The button becomes enabled.

When the checkbox is unchecked:

checkbox.checked

returns

false

Then

!false

becomes

true

So JavaScript executes:

button.disabled = true;

The button becomes disabled.

Flow Diagram

Checkbox Checked?
        │
   ┌────┴────┐
   │         │
  Yes       No
   │         │
checked   checked
 = true    = false
   │         │
!true     !false
   │         │
false      true
   │         │
Button     Button
Enabled   Disabled

JavaScript - Method 2 (Using `if...else`)

const checkbox = document.getElementById("check");
const button = document.getElementById("btn");

checkbox.addEventListener("change", fun);

function fun() {
    if (checkbox.checked == true) {
        button.disabled = false;
    } else {
        button.disabled = true;
    }
}

How Method 2 Works

Whenever the checkbox changes, the fun() function runs.

Inside the function:

if (checkbox.checked == true)

If the checkbox is checked:

button.disabled = false;

The button is enabled.

Otherwise:

button.disabled = true;

The button is disabled.

Method 1 vs Method 2

Method 1	Method 2
One line of code	Multiple lines of code
Uses the Logical NOT (`!`) operator	Uses `if...else`
Short and clean	Easier for beginners to understand
Preferred in modern JavaScript	Good for learning programming logic

Which Method Should You Use?

For beginners, the if...else version is easier to understand because the logic is written step by step.

Once you're comfortable with Boolean values and the Logical NOT (!) operator, the one-line version is the better choice because it's concise, readable, and commonly used in modern JavaScript.

Final Thoughts

Both methods achieve the same result:

Listen for changes on the checkbox.
Check whether the checkbox is selected.
Enable the button when checked.
Disable the button when unchecked.

As you continue learning JavaScript, you'll often find multiple ways to solve the same problem. Understanding both approaches helps you write cleaner code and recognize common patterns used in real-world applications.