In this article we will look at how to disable a button on a form until a checkbox is checked. This is an excellent way to make the user, subscriber accept a terms of service or privacy policy before subscribing on a newsletter or submitting some kind of information.
First let’s create a simple HTML page for our form. I link my own styles.css and script.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<title>Disable a button until a checkbox is checked</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>Now let’s add the form:
<div class="form-container">
<form action="#">
<div>
<input type="email" class="form" id="email" placeholder="name@example.com">
</div>
<div>
<input disabled="disabled" type="submit" id="submit" class="btn unchecked-btn" role="button" />
</div>
<div class="acceptance">
<input type="checkbox" id="checkbox" value="checkbox" /> I have read and accepted the <a href="#">Privacy policy</a> and <a href="#">TOS</a>.
</div>
</form>
</div>and add some styles to it in the style.css.
*, *::after, *::before {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
}
body {
background: linear-gradient(to right, rgb(249 115 22), rgb(251 146 60));
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.form-container {
width: 20%;
}
.form-container input[type="email"] {
padding: 15px 6px;
border: none;
margin-bottom: 10px;
width: 100%;
}
.form-container input[type="email"]:focus-visible {
outline: none;
}
.form-container .btn {
color: white;
padding: 14px 35px;
margin-bottom: 10px;
border: none;
transition: all .4s ease;
}
.form-container .acceptance {
font-size: 13px;
color: white;
}
.form-container .acceptance a {
text-decoration: none;
font-size: 13px;
color: rgb(27, 90, 119);
}The button will have two different styles depending on the state of the checkbox. By default the checkbox will be unchecked so we need to add a class of “.unchecked-btn” to the button and the styles.css and we also need to add a “.checked-btn” to the styles.css. These two classes will be toggled when the checkbox is turned on and off.
.unchecked-btn {
background-color: rgb(203 213 225);
}
.checked-btn {
background-color: rgb(38 38 38);
cursor: pointer;
}
.checked-btn:hover {
background-color: rgb(71 85 105);
}Now we are ready to create the necessary JavaScript to activate the button. To do this we need to create a small function in the script.js file.
function activateButton() {
const submitButton = document.getElementById('submit');
const checkbox = document.getElementById('checkbox');
if (checkbox.checked == true) {
submitButton.className = "btn checked-btn";
submitButton.disabled = "";
} else {
submitButton.className = "btn unchecked-btn";
submitButton.disabled = "disabled";
};
}So here we create a function called “activateButton”.
We also need to grab the submit button and the checkbox store them in variables called “submitButton” and “checkbox” respectively.
Then we just need an if statement to see if the box is checked or not.
We add the “checked” property to the “checkbox” variable and it will return the checked state of a checkbox. If it’s true (checked), it will add the “btn checked-btn” classes to the button (input) and it will also remove the “disabled” attribute from the HTML element.
If the condition is not true (not checked or unchecked), then we add the “btn unchecked-btn” classes and the “disabled” attribute.
After this the only thing we have to do is to add the “onchange” event to the button like this:
<input type="checkbox" id="checkbox" value="checkbox" onchange="activateButton()" />
Get the full code from Codepen here.
Leave a reply
You must be logged in to post a comment.
ChristianKovats
July 9, 2023 4:14 pm
frankl79
July 9, 2023 4:14 pm