reCAPTCHAの送信ボタンにdisabledが設定できない #JavaScript

はじめに

GoogleのreCAPTCHA(v3)の送信ボタンにdisabled属性を設定しても反映されない症状がありました。ドキュメントを調べても回答を見つけられなかったので、動作検証した結果でお話します。

症状

reCAPTCHAのドキュメントに記載されているbuttonタグにdisalbed属性を追加しても、ボタンは押せる状態になっていました。
ブラウザのディベロッパーツールでbuttonタグを確認すると、設定したはずのdisabled属性が消えていました。

<button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit' disabled>Submit</button>

検証

buttonタグの「class="g-recaptcha"」を削除すると、disabled属性は消されずに反映されました。

原因

Googleから提供されているJavascriptが「class="g-recaptcha"」のボタンに対して、何か変更を加えている可能性が高いです。
さらに挙動を見ていると、ボタンを押した一瞬だけdisabled属性が自動で設定されるようです。（ボタン連打の対策だと思います）

解決策

今回、buttonタグにdisabled属性を設定する仕様を諦めました。
必要な項目を入力するまで、送信ボタンを押せないようにしたかったのですが、ボタンを押した時に未入力の項目があれば、alert()でダイアログを表示する仕様に変更しました。

おわりに

今回は未検証ですが、ドキュメントにあるgrecaptcha.execute()を使う実装にすると、送信ボタンにdisabled属性を設定できる可能性があります。
また、時間のあるときに検証してみます。

<!-- 未検証：参考まで -->
<button type="submit" onclick="onClick();" disabled>Submit</button>
<script type="text/javascript">
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
</script>