Wie deaktiviert/aktiviert man die PayPal-Schaltfläche bei Aktivierung des Kontrollkästchens?

Question

Ich habe eine Seite auf meiner Website, die für wiederkehrende Zahlungen eingerichtet ist, aber ich möchte die PayPal Checkout-Buttons deaktivieren, bis jemand das Kästchen angekreuzt hat, das meinen Nutzungsbedingungen zustimmt. Kannst du mir helfen, das richtig zu machen?

DANKE!!!! -Brad

Answer 1

Bitte überprüfen Sie das Kontrollkästchen
 Hier ankreuzen, um fortzufahren

  paypal.Buttons({

    // onInit wird aufgerufen, wenn der Button zum ersten Mal gerendert wird
    onInit: function(data, actions) {

      // Deaktiviere die Buttons
      actions.disable();

      // Höre auf Änderungen am Kontrollkästchen
      document.querySelector('#check')
        .addEventListener('change', function(event) {

          // Aktiviere oder deaktiviere den Button, wenn er angekreuzt oder abgewählt ist
          if (event.target.checked) {
            actions.enable();
          } else {
            actions.disable();
          }
        });
    },

    // onClick wird aufgerufen, wenn der Button angeklickt wird
    onClick: function() {

      // Zeige einen Validierungsfehler an, wenn das Kontrollkästchen nicht angekreuzt ist
      if (!document.querySelector('#check').checked) {
        document.querySelector('#error').classList.remove('hidden');
      }
    }

  }).render('#paypal-button-container');

Answer 2

Die Lösung besteht darin, einfach Ihre Validierung in einer anderen Funktion zu platzieren und sie dann an beiden Stellen aufzurufen.

Also etwas wie:

function validateFields() {

      if (document.querySelector('#FirstName').value.length <= 1) {
        document.querySelector('#error').innerText = "Bitte geben Sie einen Vornamen ein";
        return false;
      }

      if (document.querySelector('#LastName').value.length <= 1) {
        document.querySelector('#error').innerText = "Bitte geben Sie einen Nachnamen ein";
        return false;
      }
      if (document.querySelector('#Phone').value.length <= 1) {
        document.querySelector('#error').innerText = "Bitte geben Sie eine Telefonnummer ein";
        return false;
      } 

      if (document.querySelector('#Email').value.length <= 1) {
        document.querySelector('#error').innerText = "Bitte geben Sie eine E-Mail-Adresse ein";
        return false;
      } 

      document.querySelector('#error').innerText = "";
      return true;

}

Dann können Sie, wenn es gültig ist, die Aktionen im init genauso aktivieren wie im Paypal-Beispiel:

  onInit: function(data, actions) {

    // Deaktivieren Sie die Buttons
    actions.disable();

    // Hören Sie auf Änderungen an der Eingabe
    document.querySelector('#userForm input')
      .addEventListener('blur', function(event) {
        if (validateFields()) {
          actions.enable();
        } 
      });
  },

Und führen Sie Ihre Validierung auch beim Klick aus

  onClick: function(data, actions) {
    if (validateFields()) {
      return true;
    }
    document.querySelector('#error').classList.remove('hidden');
  }

Answer 3

Ich weiß, dass dies ein alter Thread ist, aber ich dachte, ich würde posten, was ich gemacht habe. Einfach gesagt, alles was du tun musst, ist dem Button eine ID zu geben und auf disabled zu setzen, Java verwenden, um den Button beim Ankreuzen des Kontrollkästchens zu aktivieren, den Code auf das Kontrollkästchen anwenden onclick="UnlockButton()". Das hat für mich funktioniert.

function UnlockButton(){
  if(document.getElementById("checkboxID").checked == true)
  {
    document.getElementById("buttonid").disabled = false;
  }
  else{
    document.getElementById("buttonid").disabled  = true;
  }
  return true;
}

Answer 4

// Überprüfen, ob das Kontrollkästchen angeklickt wurde.
document.getElementById('terms').addEventListener('click', function() {
     if (this.checked) {
    document.getElementById('paypal-disabled').style.display = 'none';
      } else {
    document.getElementById('paypal-disabled').style.display = 'block';
    }
    });

// Deaktivieren der Möglichkeit, auf die Paypal-Schaltfläche mit der Tabulatortaste zuzugreifen.
document.getElementById('disable-tabing').addEventListener('focus', function() {
     document.getElementById('conditions-link').focus();
    });

#paypal-container {
  background-color: #ffc439;
  height: 2em;
  width: 5em;
  cursor: pointer;
  margin-top: 1em;
}

#paypal {
  margin: auto;
  position: relative;
  top: 0.4em;
  left: 1em;
}

#paypal:hover {
  color: white;
}

#paypal-disabled {
  background-color: white;
  height: 3em;
  opacity: 0.5;
  position: relative;
  bottom: 2.5em;
}

#disabled-content {
  opacity: 0;
}

#disable-tabing {
  opacity: 0;
}

Durch Anhaken dieses Kästchens stimmen Sie den Nutzungsbedingungen zu.

  Paypal

  Deaktiviert 

Ich weiß, diese Antwort ist spät, aber ich dachte, ich würde sie trotzdem posten, falls sie jemand verwenden kann. Sie können die Paypal-Schaltfläche nicht "deaktivieren", da sie von Paypal gerendert wird. Obwohl ich gerne eines Besseren belehrt werde. Stattdessen habe ich eine Methode gefunden, die im Grunde dasselbe bewirkt - sie verhindert, dass der Benutzer auf die Inhalte des DIV klicken kann und nicht über die 'Tab'-Taste darauf zugreifen kann.
Hier ist der JSFiddle: Paypal-Schaltfläche deaktivieren

Answer 5

Ich werde Ihnen keine vollständige Antwort im Code geben, weil ich die Elemente oder Variablennamen in Ihrem Code nicht kenne. Außerdem ist es besser, Ihren eigenen Code zu schreiben und zu lernen.

Verwenden Sie jQuery, um eine .toggle() Funktion auf das Kontrollkästchen hinzuzufügen. Sie können das Kontrollkästchen anhand seiner ID auswählen (oder Klasse, wenn Sie möchten).

Sie können ein div mit dem Namen 'paypal' erstellen und den PayPal-Button darin platzieren. Dann,

So etwas wie:

$('#checkbox').toggle(function() {
    $('#paypal').show();
}, function() {
    $('#paypal').hide();
});

Ich hoffe, das hilft.