javascriptjqueryrecaptchadisabled-input

How to enable/disable Google's reCaptcha widget?

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.

Solution

  • 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");