<form action="#">
<fieldset id="shipping">
<legend>Shipping address</legend>
<input type="text" placeholder="Name" />
<input type="text" placeholder="Address" />
<input type="text" placeholder="Zip Code" />
</fieldset>
<fieldset id="billing">
<legend>Billing address</legend>
<label for="billing-checkbox">Same as shipping address:</label>
<input type="checkbox" id="billing-checkbox" checked />
<input type="text" placeholder="Name" disabled />
<input type="text" placeholder="Address" disabled />
<input type="text" placeholder="Zip Code" disabled />
</fieldset>
</form>
input[type="text"]:disabled {
background: #cccccc;
Toggle the disabled input fields when the checkbox is clicked
const checkbox = document.querySelector("#billing-checkbox");
const billingItems = document.querySelectorAll('#billing input[type="text"]');
checkbox.addEventListener("change", () => {
billingItems.forEach((item) => {
item.disabled = !item.disabled;
Check/un-check the checkbox to change the styling on the billing fields.
Specification
Learn how to contribute
This page was last modified on by MDN contributors.
View this page on GitHub • Report a problem with this content
