Question

我的网站上有一个页面设置了定期付款，但我想禁用PayPal结帐按钮，直到有人检查了同意我的服务条款的方框。你能帮我弄清楚如何正确地做到这一点吗？

感谢!!!!! -Brad

Answer 1

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

使用jquery在复选框项上添加.toggle（）函数。您可以通过其ID（或课程，如果您愿意）选择复选框项目。

你可以创建一个名为'paypal'的div并将paypal按钮放在其中。然后，

类似的东西：

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

希望这有帮助。

Answer 2

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

我知道这个答案已经很晚了，但我想我还是会发布它以防万一有人可以使用它。你不能“禁用”Paypal按钮，因为它是由 Paypal 呈现的。虽然我很容易被证明是错的。相反，我已经找到了一个基本上做同样事情的方法 - 它让用户无法点击div的内容，也无法通过'tab'键访问它。
这是 JSfiddle ：Disable Paypal Button

Answer 4

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

类似这样：

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

Answer 5

它不起作用，PAYPAL按钮是一个标签，所以禁用它不像禁用任何DIV或BUTTON;我试图找出它但尚未找到。

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

5 个答案: