How do I make so the input submit element appears after my input checkbox element has been checked off

Question

I am trying to code a fake reCAPTCHA box for a school project. I have the code finished but I want to make it so you can first submit your answer from the input elements above after having checkboxed the reCAPTCHA element. From my research I can tell I need javascript, but I've never learned to code that before now, so I am in desperate need of help.

The input element

<form action="/action_page.php">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
</form>

<section>
    <label for="check">
        <div class="input-container">
          <input type="checkbox" class="checkbox" id="check">
          <span class="checkbox-text">I'm not a robot</span>
        </div>
      </label>

    <img src="captcha.png" alt="" class="capcap">
    <span class="recaptcha">reCAPTCHA</span>
    <br>
    <a href="#" class="hi">Privacy</a>
    <span class="dash">-</span>
    <a href="#" class="hi">Terms</a>
</section>

<p>Please check of the box to verify you're not a robot.</p>

<script>
    if (checkbox is checked) {
        input type="submit" value="Submit"
    }
</script>

I tried my hand at coding the javascript, but honestly the toturial I looked at wasn't quite helpful, and let me very puzzled.

Answer 1

Try This:

 document.getElementById("check").addEventListener("change", function () {
        var submitBtn = document.getElementById("submitBtn");

        // If the checkbox is checked, enable the "Submit" button; otherwise, disable it
        if (this.checked) {
            submitBtn.removeAttribute("disabled");
        } else {
            submitBtn.setAttribute("disabled", "true");
        }
    });

<form action="/action_page.php">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>

    <label for="check">
        <div class="input-container">
            <input type="checkbox" class="checkbox" id="check">
            <span class="checkbox-text">I'm not a robot</span>
        </div>
    </label>

    <img src="captcha.png" alt="" class="capcap">
    <span class="recaptcha">reCAPTCHA</span>
    <br>
    <a href="#" class="hi">Privacy</a>
    <span class="dash">-</span>
    <a href="#" class="hi">Terms</a>
</form>
<p>Please check the box to verify you're not a robot.</p>
<button type="submit" id="submitBtn" disabled>Submit</button>