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.

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.

• javascript
• jquery
• recaptcha
• disabled-input

• Can you not just hide the element? – thanksd Commented Sep 16, 2016 at 19:50
• Of course that's possible, but that would be an approach I'd take if some kind of disable/enable functionality does not exist that I'm unaware of. I looked through Google's documentation and didn't see anything, so I'm wondering if anyone is aware of a solution. – reformed Commented Sep 16, 2016 at 19:52
• I would think you could delay the .render method based on the callback pleting from some event, like the last element of your form being populated or whatever you choose. – Robert Wade Commented Sep 16, 2016 at 19:52
• Ah gotcha. This might be possible with custom theming – thanksd Commented Sep 16, 2016 at 19:57

1 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./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");