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

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

解决方案是将验证放在另一个函数中，然后从两个位置调用它。

所以类似于：

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;
}

然后，如果它是有效的，你可以在init中启用操作，就像在贝宝示例中一样：

  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();
        } 
      });
  },

然后在onclick 上运行验证

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

我知道这是一个旧线程，但我想我会发布我所做的。简单地说，你所需要做的就是给按钮一个id并设置为disabled，使用java在选中复选框时启用按钮，将代码应用于复选框onclick="UnlockButton（）"。这对我很有效。

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

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

我知道这个答案很晚了，但我想我还是会发布它，以防有人可以使用它。你不能"禁用"贝宝按钮，因为它是由贝宝呈现的。尽管我很乐意被证明是错的。相反，我已经找到了一个基本上可以做同样事情的方法——它阻止用户点击div的内容，也阻止用户通过"tab"键访问它
这是JSfidd：禁用Paypal按钮

我不会给你一个用代码写的完整答案，因为我不知道你代码中的元素或变量名。此外，最好是自己写并学习。

使用jquery在复选框项上添加.thoggle（）函数。您可以通过复选框项目的id（如果愿意，也可以选择类）来选择该复选框项目。

您可以创建一个名为"paypal"的div，并在其中放置paypal按钮。然后，

类似于：

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

希望这能有所帮助。

它不起作用，PAYPAL按钮是一个标签，所以禁用它不像禁用任何div或button；我想弄清楚，但还没找到。