The real symptom
- The checkbox works on first load.
- After changing quantity or opening the cart drawer again, checkout is no longer blocked.
- The cart page works but the drawer does not, or vice versa.
- The store uses Ajax cart updates or Section Rendering.
Likely causes
- Direct listeners were attached to elements that are replaced after cart updates.
- The checkout button ID differs between cart page and cart drawer.
- The checkbox lives outside the form or is not included in the rerendered section.
- Dynamic checkout buttons bypass the cart-page gate.
- The store needs checkout enforcement but only has a theme-level checkbox.
Fix path
- Put the checkbox and checkout button inside the cart section that gets rerendered, or bind from a stable parent such as
document. - Target both the cart page and drawer checkout buttons.
- Recalculate button state after every cart update.
- Disable or account for accelerated checkout buttons if the agreement must be mandatory.
- For Shopify Plus or Checkout Extensibility, enforce critical acceptance with an app block or validation pattern.
Simple checks
- Change quantity, remove an item, and add another item before testing checkout.
- Inspect whether the checkbox element is replaced after the cart update.
- Verify the selector matches both
#checkoutand#CartDrawer-Checkout.
Useful code or DevTools check
document.addEventListener("change", (event) => {
if (!event.target.matches("[data-agree-checkbox]")) return;
document.querySelectorAll("[name=checkout]").forEach((button) => {
button.disabled = !event.target.checked;
});
});
Do not do this
Do not rely on a cart checkbox to legally enforce a checkout requirement if customers can use express checkout, draft invoices, or direct checkout links that skip the cart.

