How to enable/disable Google's reCaptcha widget?

Question

Is there a way to programmatically enable/disable Google's reCaptcha widget? The purpose for this would be to prevent a user from clicking the "I'm not a robot" checkbox prematurely.

Answer 1

I found a solution thanks to this answer.

Add this CSS:

.disabled-element {
    opacity: 0.65;
    pointer-events: none;
}

Add the disabled-element class to the div containing the reCaptcha element:

<script>
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

<div class="disabled-element" id="captcha"></div>
...
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

And finally, whenever you're ready to enable the reCaptcha element, remove the class:

$("#captcha").removeClass("disabled-element");