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.
disabled
attribute on the checkboxdocument.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>