做一個複選框，並檢查是否檢查

我有一個「使用條款」頁面，然後我有我的付款等頁面。在這個頁面上，我希望用戶必須檢查一個複選框，在該複選框中將會顯示「如果他接受使用條款」，但我還希望支付服務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>

來源

2015-04-27 Sm00rf9000

什麼你可以是這樣的：

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

來源

2015-04-27 21:41:06

你剛纔救了我的命！它的工作原理是完美的，只有當用戶嘗試點擊按鈕並且仍然被禁用時，是否可以添加警報？ – Sm00rf9000

不幸的是，你不能在jQuery中對任何禁用屬性的元素執行點擊動作:(你可以用不同的方式調整它，或者在禁用時向它添加一個類並將背景圖像更改爲灰度相同的圖像會讓它覺得它是「禁用」的，希望它有幫助 –

沒問題，我已經修復它，它工作的很完美。 – Sm00rf9000

在你的形式把<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/

來源

2015-04-27 21:46:38

做一個複選框，並檢查是否檢查

回答

相關問題