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

假设您引用了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 2

你可以做这样的事情

<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 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;
         }
     }
 }

禁用链接，直到选中一系列复选框

3 个答案: