Как отключить / включить кнопку PayPal при активации флажка?

Question

У меня на сайте есть страница, на которой настраиваются регулярные платежи, но я хочу отключить кнопки оформления платежей PayPal, пока кто-нибудь не установит флажок, соответствующий моим Условиям обслуживания. Можете ли вы помочь мне понять, как это сделать правильно?

СПАСИБО !!!!! -Brad

Answer 1

Я не собираюсь давать вам полный ответ, написанный в коде, потому что я не знаю элементов или имен переменных в вашем коде.Также лучше написать свой собственный и учиться.

Используйте jquery, чтобы добавить функцию .toggle () к элементу флажка.Вы можете выбрать элемент флажка через его идентификатор (или класс, если хотите).

Вы можете создать div под названием «paypal» и поместить внутри него кнопку PayPal.Тогда

Что-то вроде:

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

Надеюсь, это поможет.

Answer 2

// 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 : Отключить кнопку PayPal

Answer 3

Я знаю, что это старая ветка, но я решил опубликовать то, что я сделал.Проще говоря, все, что вам нужно сделать, это присвоить кнопке идентификатор и установить значение «отключено», использовать java для включения кнопки-флажка, применить код к флажку onclick = "UnlockButton ()".Это сработало для меня.

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

Answer 4

Это не сработает, кнопка PAYPAL - это тег, поэтому его отключение не похоже на отключение DIV или BUTTON;Я пытаюсь понять это, но пока не нашел.