必须拥有所有3选中的复选框选中启用按钮

Question

我需要用下面的脚本一些帮助。当有人试图将产品添加到购物车时，我将其用作弹出窗口。

目前如果一个复选框被选中（不知道为什么它不工作的小提琴），但我要的是有它禁用，直到3个复选框被选中的按钮将被激活。

我需要提一下，总共有2个不同品牌的2个不同的弹出窗口。对于1品牌，只有1个复选框需要检查按钮才能激活，但在第二个弹出框中有3个复选框。所以说，我需要这个选择1复选框，以及需要检查所有3个复选框。

<div> 
    <div class="vet-diet-info"> 

    <p> 
     <label> 
     <input id="checkbox" type="checkbox"> Agree. 
     </label> 
    </p> 
    <p> 
     <label> 
     <input id="checkbox" type="checkbox"> Agree. 
     </label> 
    </p> 
    <p> 
     <label> 
     <input id="checkbox" type="checkbox"> Agree. 
     </label> 
    </p> 
    <p> 
     <a id="mainbutton" href="javascript:void(0)" data-dismiss="modal" class="btn btn-info" disabled="disabled">Confirm Purchase</a> 
    </p> 
    </div> 
</div> 


function SetVetDietsEventsPopup() { 
    jq("#checkbox").off("change").on("change", function() { 
    if (this.checked) { 
     jq("#mainbutton").removeAttr("disabled"); 
    } else { 
     jq("#mainbutton").attr("disabled", "disabled"); 
    } 
    }); 
    jq("#btnVetDietsConfirmPurchase").off("click").on("click", function() { 
    if (jq(this).is(":disabled")) { 
     return false; 
    } else { 
     RunAddToCartButtonClickEvent(); 
     return false; 
    } 
    }); 
} 

https://jsfiddle.net/5xy0qtvy/1/

Answer 1

所有ID首先是独特你不能使用相同的ID为一个以上的元素，而不是使用类

var numItems = $('.checkbox').length; //number of checkboxes 
var checked = 0; 

$('.checkbox').each(function() { 
if ($(this).prop('checked')) { 
checked++; 
} 
}); 

if (numItems === checked) 
$("#mainbutton").removeAttr('disabled'); 
else 
alert('please check all the checkboxes'); 

不要忘记改变所有的id="checkbox"到class="checkbox"

Answer 2

更新修正了我将逻辑倒置的地方。

如前所述ID必须是唯一的alread。

这可以withouth的每个循环但来完成。使用:not与:checked一起查看是否有任何未选中的框。

$(document).ready(function() { 
 
    $(".vet-diet-info [name='checkbox']").click(function() {; 
 
    $("#mainbutton").prop("disabled", $(".vet-diet-info [name='checkbox']:not(:checked)").length !== 0); 
 
    console.log($("#mainbutton").prop("disabled")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="vet-diet-info"> 
 

 
    <p> 
 
     <label> 
 
     <input name="checkbox" type="checkbox">Agree. 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <label> 
 
     <input name="checkbox" type="checkbox">Agree. 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <label> 
 
     <input name="checkbox" type="checkbox">Agree. 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <a id="mainbutton" href="javascript:void(0)" data-dismiss="modal" class="btn btn-info" disabled="disabled">Confirm Purchase</a> 
 
    </p> 
 
    </div> 
 
</div>