How to disable/enable PayPal button on Checkbox ac

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

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 2

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 3

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 4

// 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