做一个复选框并检查是否选中答案

【问题标题】：Make a checkbox and check if checked做一个复选框并检查是否选中
【发布时间】：2015-07-06 12:38:59
【问题描述】：

我有一个“使用条款”页面，然后我有付款页面等。在此页面上，我希望用户必须选中一个复选框，其中会显示“如果他接受使用条款”，但我还想要一个用于支付服务 Stripe 的 javascript，以检查复选框是否被选中并且如果不是，它会提醒用户检查它，如果它像往常一样继续进行。

我已经在脚本中注释了不同的功能。我希望它能够正常工作，所以如果我单击复选框然后单击提交按钮，它将照常工作，但如果我不选中复选框，它会生成一个警告框。我想使用“if”函数来做到这一点。复选框必须采用 id 为“payment-form”的表单，其余输入均位于该表单中。

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>

【问题讨论】：

标签： javascript html forms if-statement checkbox

【解决方案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');
          }
       });

【讨论】：

你刚刚救了我的命！它工作完美，唯一的事情是，如果用户尝试单击按钮并且它仍然被禁用，是否有办法添加警报？
遗憾的是，您不能在 jQuery 中对具有禁用属性的元素执行任何单击操作 :(，您可以以不同的方式对其进行调整，或者在禁用时添加一个类并更改背景图像到相同的灰度图像，这会让人感觉它被“禁用”了。希望它有所帮助
没问题，我已经修好了，它工作得很好。

【解决方案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/

【讨论】：