Member Avatar for keavon

Hi, I think this is my second post here. I am new to coding things the slightest bit complicated, so I hope someone can help me out! Here it is:
I have a website with a very simple form (just a dropdown list, an 'I agree to the Terms of Service' checkbox, and a submit button.
I want to have the submit button grayed out until the 'I agree to the ToS' Button is checked, and of course, I need it to gray back out again if you un-tick it again.
Here is a link to the site: . If you want my code, just view the page's source. I currently have a link that does what I want (but clicking it again doesn't gray it out again), but I can't figure out how to make checking the button it it, so I can remove the link.
I would really appeciate some help!
Thanks in advance!
-Keavon

P.S. Please also check out my other post to see if you can help and answer that one too.
http://www.daniweb.com/forums/post1318477.html#post1318477

Edited by keavon because: n/a
  • 2 Contributors
  • 3 Replies
  • 539 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by keavon

Dani AI

Generated

Nice, 's quick inline fix solved the immediate problem for . A few small refinements make this more robust and accessible for real sites: avoid inline JS, provide a no-JS fallback, use HTML5 validation where helpful, and always re-check on the server.

Keep the checkbox labeled and required, but prefer a visual "grayed" state instead of permanently disabling the button in HTML (disabled buttons can be removed from the tab order and make no-JS users stuck). Use unobtrusive JS to toggle a visual class and to intercept submit so you can focus the checkbox and show a message when needed.

Example (unobtrusive, accessible pattern):

<form id="tosForm" method="post" action="/submit">
  <label for="agree">I agree to the Terms of Service</label>
  <input type="checkbox" id="agree" name="agree" required>
  <button type="submit" id="submitBtn" class="muted">Submit</button>
</form>

<style>
button.muted { opacity: 0.5; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var form = document.getElementById('tosForm');
  var agree = document.getElementById('agree');
  var submit = document.getElementById('submitBtn');

  function update() {
    submit.classList.toggle('muted', !agree.checked);
    submit.setAttribute('aria-disabled', (!agree.checked).toString());
  }

  agree.addEventListener('change', update);
  update();

  form.addEventListener('submit', function (e) {
    if (!agree.checked) {
      e.preventDefault();
      agree.focus();
      // show inline message if desired
    }
  });
});
</script>

Notes and troubleshooting:

  • Always validate server-side that agree is present — client checks can be bypassed.
  • If you do want to actually set disabled, provide a <noscript> message or alternate flow so users without JS can still submit.
  • Test with keyboard only and a screen reader; use label for="agree" and keep focus behaviour predictable.
  • If the button does not re-disable on uncheck, confirm your JS binds the change event after DOM load and that element ids match.

Recommended Answers

All 3 Replies

Member Avatar for hielo 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<form>
<input type="checkbox" name="agree" value="yes" onclick="Submitter.disabled = !this.checked" />Do you Agree?
<input type="submit" name="Submitter" id="Submitter" value="Submit" disabled="disabled"/>
</form></body>
</html>
Member Avatar for keavon

Thanks, i'll try it out too
:P

Member Avatar for keavon

Thank you SO MUCH! It works!!!!!!
I have posted on so many forums about... err... well my other question, and you are the first person to answer... both of my questions! :P
Thanks!
daniweb.com is the forum I find the most help on. xD
Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.