CODEWITHSUNDEEP
javascriptjqueryrecaptchadisabled-input
reformed
reformed

Reputation: 4810

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.

Upvotes: 2

Views: 17409

Answers (1)

reformed
reformed

Reputation: 4810

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

Upvotes: 3

Related Questions