Question

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

目前，如果选中了其中一个复选框，该按钮将变为活动状态（不确定为什么它不适合小提琴），但我想要的是禁用它直到选中所有3个复选框。

我需要提一下，总共有两个不同的品牌有两个不同的弹出窗口。对于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必须是唯一的。

然而，这可以在没有每个循环的情况下完成。将: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>

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

2 个答案: