如何禁用/启用复选框激活上的PayPal按钮? [英] How to disable/enable PayPal button on Checkbox activation?

问题描述

我的网站上有一个页面设置了定期付款，但是我想禁用PayPal结帐按钮，直到有人选中了同意我的服务条款的框.您能帮我弄清楚如何正确执行此操作吗?

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

推荐答案

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

我知道这个答案很晚，但是我认为我仍然会发布它，以防万一有人可以使用它.您无法"禁用"贝宝"按钮，因为它是由 Paypal 呈现的.尽管我很容易被证明是错误的.相反，我想出了一种基本上可以完成相同操作的方法-它使用户无法单击div的内容，也无法通过'tab'键访问它.
这是 JSfiddle :禁用Paypal按钮

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

这篇关于如何禁用/启用复选框激活上的PayPal按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！