在选中一系列复选框之前禁用链接答案

【问题标题】：Disabling a link until a series of checkboxes are checked在选中一系列复选框之前禁用链接
【发布时间】：2011-08-18 23:59:24
【问题描述】：

我试图弄清楚如何禁用以下链接，直到选择了一系列 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 方面也有点迟钝，所以请越简单越好。我希望所有代码都在元素附近，而不是在不同的位置，即使这可能是“首选”方法。

非常感谢。

【问题讨论】：

4 或 5？是哪一个？ 4个还是5个？是检查了哪些还是有一定数量有关系吗？
好的，实际上它将是 12。并且必须检查所有这些才能提交图像。

标签： javascript jquery checkbox licensing

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

【讨论】：

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

等等。

【讨论】：

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

【讨论】：