如果未選中復選框，則不發送提交類型為image的表單

Question

當未選中復選框時，我需要禁用此表單的提交（最好在單擊時發送帶有javascript的警告消息）。

我發現了許多經典提交按鈕的解決方案，但是它們都不能用於圖像提交。 我一直可以顯示錯誤消息，但仍在發送表單。

你知道我該怎么解決嗎？ 謝謝

<form method="POST" name="paypal" action="">
<input type="checkbox" name="checkbox" id="checkbox"/> 
<label for="checkbox" class="agree">I accept the</label> <a href="#" target="_blank">conditions</a>
<input type="image" name="submit" src="http://www.example.com/paypal.png">
</form>

Answer 1

<form method="POST" name="paypal" action="" onsubmit="return (function() { if (!document.getElementById('checkbox').checked) { alert('You must accept the conditions');return false; }})()">
<input type="checkbox" name="checkbox" id="checkbox"/> 
<label for="checkbox" class="agree">I accept the</label> <a href="#" target="_blank">conditions</a>
<input type="image" name="submit" src="http://www.example.com/paypal.png">
</form>

我添加了一個onsubmit事件處理程序，該處理程序運行一個函數，該函數確定是否選中了復選框，如果沒有選中，我們將顯示警報並返回false，以防止提交表單。

Answer 2

只需偵聽表單上的Submit事件，檢查所有您需要做的事情，如果表單正確，則返回true，否則返回false。 如果返回false，則不應提交表單。

$('form[name="paypal"]').submit(function () {
    if (invalid) {
        alert("Some of the fields are not valid.");
        return false;
    }
    return true;
});

Answer 3

單擊該圖像時，請檢查該復選框是否已選中。

jQuery('input[name="submit"]').on('click', function(){
      var accept = jQuery('input[name="checkbox"]').is(":checked");
      if(accept == false){
        alert("you did not accept the terms");
        return false;
      }
      if(accept == true){
        //submit form
      }
    });