Search code examples
jqueryhtmlcssasp-classic

Can a checkbox only be checked after a user clicks a hyperlink (Terms and Conditions?)?


I am trying to write a form where users select an option, and certain forms show as a result of that option--I have that working great with jquery. Next, I am trying to make the user have to click the hyperlink to the Terms and Conditions before they can check a checkbox.

I have seen multiple examples of how users must click the checkbox in order to see the hyperlink, but I am wondering if it can go the other way around.

<div id="additionalForm" class="FormDiv">
  <fieldset>
    <legend>Housing Agreement</legend>
    <input id="chkSignature" name="chkSignature" type="checkbox" required>
    <label for="chkSignature">
       <b>I have read and I agree to the 
	  <a href="TermsandConditions.asp" target="_blank">Terms and Conditions</a>
       </b>
    </label>
  </fieldset>
</div>

Right now, I have validation for the checkboxes, but no way for me to see if they are actually reading the content within the hyperlink. I'd like to make the user click the hyperlink in my HTML before they can check the box.


Solution

    • Added the disabled attribute on the checkbox
    • Added a click event listener to the click of the link
    • Removed the disabled attribute when the link is clicked

    document.querySelector('#termsAndConditions')
      .addEventListener('click', function(e){
        document.querySelector('#chkSignature').removeAttribute('disabled');
      });
    <div id="additionalForm" class="FormDiv">
      <fieldset>
        <legend>Housing Agreement</legend>
        <input id="chkSignature" name="chkSignature" type="checkbox" required disabled>
    
        <label><b>I have read and I agree to the <a href="TermsandConditions.asp" target="_blank" id="termsAndConditions">Terms and Conditions</a></b></label>
    
      </fieldset>
    </div>