Question

我有＆＃34;使用条款＆＃34;页面，然后我有我付款的页面等。在这个页面上，我希望用户必须选中一个复选框，它会说出＆＃34;如果他接受使用条款＆＃34;，但我也想要一个javascript，对于支付服务Stripe，检查是否选中该复选框，如果没有，它将提醒用户检查它，以及是否只是一直进行。

我在脚本中评论了不同的功能。我希望它能够运行，所以如果我点击复选框然后点击提交按钮，它将照常工作，但如果我没有勾选复选框，它将会发出一个警告框。我想用＆＃34; if＆＃34;功能。该复选框必须位于带有ID＆＃34; payment-form＆＃34;的表单中，其余输入为。

javascript是标签中的整个功能。如果未选中复选框，则必须禁用整个功能。

到目前为止我的代码：

<!DOCTYPE html>
<html>

<head>

    <script src="https://checkout.stripe.com/checkout.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript"> /* this is the javascript function that only has to "launch" if the checkbox is checked and if not it has to make an alert box to the user and not do any of the other functin in the javascript. */
    $(document).ready(function() {  

    var handler = StripeCheckout.configure({
        key: 'Removed for safety',
        image: 'image2.png',
        token: function(token) {
            var $form = $('#payment-form');

            $form.append($('<input type="hidden" name="stripeToken" />').val(token.id));
            $form.get(0).submit();
        }
    });

    $('#customButton').on('click', function(e) {

        var amount = Math.round($("#amount").val()*100);

        handler.open({
        name: 'Payment',
        description: 'describtion',
        amount: amount
        });
        e.preventDefault();
    });

    $(window).on('popstate', function() {
        handler.close();
    });

});
    </script>

</head>

<body>

        <div id="header">
        </div>

        <div id="container">

        <div id="content">

            <div class="firstproductbidwrap" style="height:500px width:800px">


                    <form id="payment-form" action="chargeCard.php" method="POST" name="payment-form"> <!-- this is the form I would like to add the checkbox to -->
                    <input onkeypress="return isNumberKey(event)" type="text" name="amount" id="amount" value="" readonly/>
                    <input type="text" name="emailForPayment" id="emailForPayment" placeholder="Enter Email"/>
                    <input type="text" name="displayNameForPayment" id="displayNameForPayment" placeholder="Enter Display Name" maxlength="12"/>
                    <input type="image"  src="button3.png" id="customButton" value="submit" alt="button"/>
                    </form>

                    <script type="text/javascript">
                    function toDec(code) {
                    return code - 48;
                    }
                    function isNumberKey(evt)
                    {
                    var charCode = (evt.which) ? evt.which : event.keyCode
                    if (charCode > 31 && (charCode < 48 || charCode > 57 || toDec(charCode) != currentVar + 1)) 
                    return false;

                    return true;
                    }
                    </script>

                    <script type="text/javascript">
                    var request = new XMLHttpRequest();
                    request.open('GET', 'textFileVariables.txt', false);
                    request.send();

                    var currentVar= parseInt(request.responseText)
                    var nextVar = currentVar + 1;
                    document.getElementById("currentVar").innerHTML = currentVar;
                    document.getElementById("nextVarDisplay").innerHTML = nextVar ;
                    document.getElementById("amount").value = nextVar ;

                    </script>


                <div class="acceptrules">
                    When participating <!-- this is the text for accept terms with the link -->
                    <br>
                    you agree to the rules <a href="">Terms of Use</a>
                </div>

            </div>


        </div>


        </div>

</body>

</html>

Answer 1

你能做到的是：

 <!--Replace this thing -->
 <input type="image"  src="button3.png" id="customButton" value="submit" alt="button"/>

 <!-- By This -->
 <input id="myButton" type="submit" disabled="disabled" />

然后在CSS中

  <style>
     #myButton{
        background: url(path/to/your/image.png);
        width: 100px; /*Your image size*/
        height: 50px; /*Your image height*/
     }           
  </style>

然后，在提交

之前添加此输入

      <label><input type="checkbox" id="terms" /> I accept terms and condition</label>

然后在你的JS中

       $('#terms').on('change', function(){
          if ($(this).is(':checked')){
             $('#myButton').removeProp('disabled');
          }
          else{
             $('#myButton').attr('disabled', 'disabled');
          }
       });

Answer 2

将<input type="checkbox" id="agree" />放在表单中的某处，然后尝试：

$('#customButton').on('click', function(e) {
    if (!document.getElementById("agree").checked)
        alert("You must agree to the TOS.");
    else {
        var amount = Math.round($("#amount").val()*100);

        handler.open({
        name: 'Payment',
        description: 'describtion',
        amount: amount
        });
    }
    e.preventDefault();
});

https://jsfiddle.net/cj6f41aL/

选中一个复选框并检查是否已选中

2 个答案: