在按钮 id 提交之前需要检查 4 个复选框才能起作用 js

Question

我正在制作用于快速销售多种产品的订单。

总共有 9 种产品，但优惠是让客户以 2 的价格选择其中的任何 4 种。我有一个脚本可以确保用户不会选中超过 4 个复选框，但我可以'如果他们选择的项目少于 4 个，找不到确保提交按钮被禁用的方法。

这是一个脚本示例：

<SCRIPT LANGUAGE="javascript">

function KeepCount() {

var NewCount = 0;

if (document.B2G2F.os1.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os2.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os3.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os4.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os5.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os6.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os7.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os8.checked)
{NewCount = NewCount + 1;}

if (document.B2G2F.os9.checked)
{NewCount = NewCount + 1;}

if (NewCount == 5)
{
alert('Pick Just FOUR Please');
document.B2G2F; return false;
}
}
</SCRIPT> 

和html：

<div id="choose" style="background-color:none; margin-top:5px;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" name="B2G2F">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="################">
<table>
<tr><td style="padding-top:5px;">
<h3 style="color:#FF9000;">Simply select your FOUR DVDs from the checklist and then click the buy now button</h3>
</td></tr>
<tr><td>
<input type="checkbox" name="os1" value="X" onClick="return KeepCount()"> Choose woodworking hand tools
<input type="hidden" name="on1" value="choosetools"><br/>

<input type="checkbox" name="os2" value="X" onClick="return KeepCount()"> How to sharpen woodworking hand tools
<input type="hidden" name="on2" value="sharpening"><br/>

<input type="checkbox" name="os3" value="X" onClick="return KeepCount()"> How to use a Chisel
<input type="hidden" name="on3" value="chiseling"><br/>

<input type="checkbox" name="os4" value="X" onClick="return KeepCount()"> How to use a Bench Plane
<input type="hidden" name="on4" value="bench plane"><br/>

<input type="checkbox" name="os5" value="X" onClick="return KeepCount()"> How to use scrapers and scraper planes
<input type="hidden" name="on5" value="scrapers"><br/>

<input type="checkbox" name="os6" value="X" onClick="return KeepCount()"> Learn Dovetailing
<input type="hidden" name="on6" value="dovetailing"><br/>

<input type="checkbox" name="os7" value="X" onClick="return KeepCount()"> Make piston fit drawers
<input type="hidden" name="on7" value="drawers"><br/>

<input type="checkbox" name="os8" value="X" onClick="return KeepCount()"> How to Hammer Veneer
<input type="hidden" name="on8" value="hammer veneer"><br/>

<input type="checkbox" name="os9" value="X" onClick="return KeepCount()"> Learn French Polishing
<input type="hidden" name="on9" value="polishing"><br/>

</td></tr>
</table>

<input type="hidden" name="currency_code" value="GBP">
<div style="float:right; margin-top:12px; margin-right:352px;">
<input type="submit" value="BUY NOW" id="submit" name="Submit" class="button" alt="PayPal — The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</div>
</form>

我已经能够为单个复选框找到很多答案，但我尝试过的多个复选框问题解决方案根本不起作用。

想法？

Answer 1

看看这个FIDDLE

您需要使用此行来禁用/启用控件：

document.getElementById('submit').disabled = false;

Answer 2

在呈现表单时向提交按钮添加禁用属性。

那么既然你用的是jquery，

$("input[type=checkbox]").change(function() {
    if($("input[type=checkbox]:checked").length >= 4) {
        $("#submitButtonId").removeAttr("disabled");
    } else {
        $("#submitButtonId").attr("disabled", "disabled");
    }
});

Answer 3

你需要做的很简单，就是创建一个 var 来保存选定的等开始

var selected = 0;

然后获取所有输入

var inputs = document.getElementsByTagName("input")

var submit = document.getElementById("submit");
//assuming you given id to your submit

然后遍历它们

for(var i=0; i<inputs.length;i++){

if(inputs[i].type == "checkbox" && inputs[i].checked){
selected++;
}
if(selected == 4){
submit.disabled = true;
}
}

每次选中复选框时都会这样做。在您的点击事件监听器中。