jquery - 必须选中所有3个复选框以启用按钮

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

当前，如果选中其中一个复选框（不确定为什么它不能在小提琴上使用），则该按钮将变为活动状态，但是我要禁用的是该按钮，直到选中所有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/

最佳答案

首先，id是唯一的，您不能对多个元素使用相同的id，而应使用class

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"

关于jquery - 必须选中所有3个复选框以启用按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38427451/