禁用链接，直到检查了一系列复选框

Question

我想弄清楚如何禁用以下链接，直到选中一系列4或5复选框。

<input type="image" src="/wp-content/themes/happy/images/add-to-cart.png" name="Buy" class="wpsc_buy_button" id="product_<?php echo wpsc_the_product_id(); ?>_submit_button" onclick="window.location='http://example.com/store/checkout/';"/> 

谢谢！

我对js和jquery也有些迟钝，所以请简单一点。我希望所有代码都在元素附近，并且不在不同的位置，即使这可能是“首选”方法。

非常感谢。

Answer 1

你可以做这样的事情

<input type="image" src="/wp-content/themes/happy/images/add-to-cart.png" name="Buy" class="wpsc_buy_button" id="product_<?php echo wpsc_the_product_id(); ?>_submit_button" onclick="if($(this).data("enabled")){window.location='http://example.com/store/checkout/';}"/> 

而且在复选框点击做到这一点

$("input").click(function(){ 

    //Here check for this checkbox and all other series of checkbox, if they are checked then 
    $("img[name=Buy]").data("enabled", true); 
    //else 
    $("img[name=Buy]").data("enabled", false); 
}); 

Answer 2

假设你有jquery引用，改变你的onclick方法，像是;

onclick="if($('.checkboxClass').not(':checked').length > 0) window.location='http://example.com/store/checkout/'; else {alert('please tick all the checkboxes'); return 0}; 

然后添加 “checkboxClass”（或任何类，你选择），所有的复选框

<input type="checkbox" class="checkboxClass" value="1" /> 
<input type="checkbox" class="checkboxClass" value="2" /> 

等等。

Answer 3

如果你有以下形式：

<form method="post" action="" class="my-form"> 
    <p> 
     <input type="checkbox" /> First item 
    </p> 
    <p> 
     <input type="checkbox" /> Second item 
    </p> 
    <p> 
     <input type="image" src="..." /> 
    </p> 
</form> 

使用jQuery检查表格提交

$(function() { 
    $(".my-form").submit(function() { 
     if ($(".my-form input[type=checkbox]:checked").length < 1) 
     { 
      alert("You must select at least one checkbox to proceed."); 
      return false; 
     } 
    } 
}