必须选中所有 3 个复选框才能启用按钮答案

【问题标题】：Must have all 3 checked boxes checked to enable button必须选中所有 3 个复选框才能启用按钮
【发布时间】：2016-07-19 12:21:26
【问题描述】：

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

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

【问题讨论】：

标签： jquery html css

【解决方案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"

【讨论】：

考虑使用prop而不是属性。

【解决方案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>

【讨论】：