必須擁有所有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>