css 购物车条件条款复选框|这将放置一个强制用户勾选的复选框，以便他们可以通过购物车购买商品。 ü

Posted 2021-05-13

<script>
  // ADD CHECK BOX TO CHECK OUT
  $('.checkoutSectionInner.checkoutPaypal').addClass('inactive');
  $('<div class="conditionsBox"><input type="checkbox" name="conditions" value="Conditions"><label for="Conditions"><a href="#">######## AGREE TO TERMS OF CONDITIONS ########</a></label></div>').insertBefore('.checkoutFinalPrice');


  $(function() {  
    $('input[value="Conditions"]').click(function(){
      $('.checkoutSectionInner.checkoutPaypal').toggleClass("inactive");
    });
  });
</script>

/*------SHOP TERMS OF CONDITIONS CHECKBOX-----*/

.checkoutSectionInner.checkoutPaypal.inactive {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

.checkoutSectionInner.checkoutPaypal {
  opacity: 1;
  pointer-events: all;
}

.conditionsBox
{
  display: block;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0,.1);
  margin: 10px 0;
  font-size: .9em;
}

.conditionsBox input
{
  -webkit-appearance: checkbox;
  margin-right: 10px;
}