Hidden checkbox required to be checked even when hidden

I’m kinda of stuck.

I’m using html5 required for a very simple validation, and I have a checkbox that only shows up if you meet some conditions. You then have to agree with terms and check the checkbox.

The problem is when you don’t hit conditions and checkbox reminds hidden then its not posible to submit. It should only be required if you see it.

.terms{
display: none;
}

<form>

<p><input class="terms" type="checkbox" id="checkId" required>Terms & Conditions</p>
<input type="submit" name="submit" value="Submit" id="submit" />

</form>