RecaptchaV2 启用/禁用提交

Question

我的网络中有一个表单，但我收到了一些跨度，因此我添加了 Google RecaptchaV2 并停止了跨度，但我想禁用提交按钮，直到检查了 Recaptcha 并且用户证明这是人类。

RecaptchaV2 在 iframe 中运行，我如何读取元素或属性以禁用提交？

在 iframe 内部有一个跨度，一旦验证就会更改内容： 来自：

<span id="recaptcha-accessible-status">Recaptcha requires verification</span>

到：

<span id="recaptcha-accessible-status">You are verified</span>

所以阅读我认为可以使用 Jquery 禁用/启用提交按钮，尝试使用 content() 读取它但无法访问 iframe 内容，有什么想法吗？

谢谢！

Answer 1

这是答案，这只是在检查时禁用/启用提交按钮：

使它可以在一页中使用不同的表单，但未经测试，欢迎提出任何建议/更改。

呼叫：

<div class="g-recaptcha" data-sitekey="KEY-HERE" data-callback="correctCaptcha"></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script>

data-callback="correctCaptcha" 是杰作。

js:

$("form").each(function() {
    $(this).find(':input[type="submit"]').prop('disabled', true);
});
function correctCaptcha() {
    $("form").each(function() {
        $(this).find(':input[type="submit"]').prop('disabled', false);
    });
}

Answer 2

这就是我最终做的：

  var verifyCallback = function(response) {
    $('.contactForm :input[type="submit"]').prop('disabled', false);
  };

  var onloadCallback = function() {        
    grecaptcha.render('contactForm', {
      'sitekey' : 'SITE-KEY-HERE',
      'callback' : verifyCallback,
      'theme' : 'light'
    });
  };