如何在复选框激活时禁用/启用 PayPal 按钮？

Question

I have a page on my site that is setup for recurring payments, but I want to disable the PayPal checkout buttons until someone has checked the box that agrees to my Terms Of Service. Can you help me figure out how to do this properly?

THANKS!!!!! -Brad

Answer 1

<p id="error" class="hidden">Please check the checkbox</p>
<label><input id="check" type="checkbox"> Check here to continue</label>

<script>
  paypal.Buttons({

    // onInit is called when the button first renders
    onInit: function(data, actions) {

      // Disable the buttons
      actions.disable();

      // Listen for changes to the checkbox
      document.querySelector('#check')
        .addEventListener('change', function(event) {

          // Enable or disable the button when it is checked or unchecked
          if (event.target.checked) {
            actions.enable();
          } else {
            actions.disable();
          }
        });
    },

    // onClick is called when the button is clicked
    onClick: function() {

      // Show a validation error if the checkbox is not checked
      if (!document.querySelector('#check').checked) {
        document.querySelector('#error').classList.remove('hidden');
      }
    }

  }).render('#paypal-button-container');
</script>

Answer 2

I know this is an old thread but thought Id post the what I did. Simply, all you need to do is give the button an id and set to disabled, use java to enable the button on checkbox checked, apply the code to the checkbox onclick="UnlockButton()". That worked for me.

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

Answer 3

 // Listen to whether the checkbox is clicked. document.getElementById('terms').addEventListener('click', function() { if (this.checked) { document.getElementById('paypal-disabled').style.display = 'none'; } else { document.getElementById('paypal-disabled').style.display = 'block'; } }); // Disable the ability to access the paypal button using the tab key. 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; }

 <!-- Terms & Conditions --> <input type="checkbox" name="terms" value="accept" id="terms"><small>By checking this box you agree to the <a href="#" id="conditions-link">Terms and Conditions</a>.</small> <!-- The text input below is used to keep the user from being able to access the paypal button using the 'tab' key. Every time the text field is focused, it triggers an event which focuses on the element that precedes it. Set the opacity to 0. --> <input type="text" id="disable-tabing"> <!-- This is the div the paypal button will be rendered in. --> <div id="paypal-container"> <!-- Ignore the <span>, it's just for presentation. --> <span id="paypal">Paypal</span> </div> <!-- This div is used to cover-up the paypal button. Set it's position to relative and move it on top of the paypal button. Set it's opacity to make it translucent. --> <div id="paypal-disabled"> <!-- Ignore the <span>, it's just for presentation. --> <span id="disabled-content">Disabled</span> </div>

I know this answer is late, but I thought I would still post it just in case someone can use it. You cannot " disable " the Paypal button because it's being rendered by Paypal . Although I'm open to being proved wrong about that. Instead I've figured out a method which basiclly does the same thing—it keeps the user from being able to click the contents of the div, and from accessing it via the 'tab' key.
Here's the JSfiddle : Disable Paypal Button

Answer 4

I'm not gonna give you a full answer written in code because I don't know the elements or variable names in your code. Also it's better to write your own and learn.

Use jquery to add a .toggle() function on the checkbox item. You can select the checkbox item via its id (or class if you wish).

You can create a div called 'paypal' and place the paypal button inside it. Then,

Something like:

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

Hope this helps.

Answer 5

It wont work, PAYPAL button is a tag, so Disabling it is not like disabling any DIV or BUTTON; Im trying to figure it out to but not found yet.

Answer 6

The solution is to just put your validation in another function and then call it from both places.

So something like:

function validateFields() {

      if (document.querySelector('#FirstName').value.length <= 1) {
        document.querySelector('#error').innerText = "Please enter a first name";
        return false;
      }

      if (document.querySelector('#LastName').value.length <= 1) {
        document.querySelector('#error').innerText = "Please enter a last name";
        return false;
      }
      if (document.querySelector('#Phone').value.length <= 1) {
        document.querySelector('#error').innerText = "Please enter a phone number";
        return false;
      } 

      if (document.querySelector('#Email').value.length <= 1) {
        document.querySelector('#error').innerText = "Please enter an email";
        return false;
      } 

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

}

Then if it's valid you can enable the actions in the init just like in the paypal sample:

  onInit: function(data, actions) {

    // Disable the buttons
    actions.disable();

    // Listen for changes to the input
    document.querySelector('#userForm input')
      .addEventListener('blur', function(event) {
        if (validateFields()) {
          actions.enable();
        } 
      });
  },

And then also run your validation on the onclick

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