Почему мой код с pointerEvents = 'none' не работает?

У меня на странице есть кнопка для входа через эппл айди.

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    <div id="appleid-signin" class="apple-sign-in text-center oauth-link" data-color="black" data-border="true" data-type="sign-up"></div>
    <script type="text/javascript">
        AppleID.auth.init({
            clientId : '<%= ENV['APPLE_CLIENT_ID'] %>',
            scope : 'name email',
            redirectURI : '<%= callback_apple_url %>',
            state : 'state'
        });
    </script>

А так же чекбокс с правилами. Я хочу заблокировать действия кнопки при нажатии на нее и показать сообщение если пользователь не нажал на чекбокс с правилами.

Я не силен в JS, попробовал написать следующий код:

if (!$('.oauth-terms-agreement').prop('checked')) {
    document.getElementById('appleid-signin').style.pointerEvents = 'none';
    $('.oauth-link').click(function () {
      $('.site-wrapper').prepend('<div class="alert alert-error">Please agree to the Privacy Policy and Terms & Conditions.</div>');
        });
  };

Он блокирует нажатия на кнопку, но все же, не показывает сообщение при клике. Если убрать

document.getElementById('appleid-signin').style.pointerEvents = 'none';

То сообщение показывается, но кнопка остается рабочей.

Как я могу сделать, что бы при клике на кнопку ничего не происходило, кроме показа сообщения, пока пользователь не нажмет на чекбокс?