必须选中所有3个复选框才能启用按钮 [英] Must have all 3 checked boxes checked to enable button

问题描述

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

目前，如果选中其中一个复选框，该按钮将变为活动状态（不知道为什么它不能在小提琴上工作），但我想要的是让它被禁用，直到所有3复选框被选中。

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

 < div> 
< div class =vet-diet-info> 
 
< p> 
< label> 
< input id =checkboxtype =checkbox>同意。 
< / label> 
< / p> 
< p> 
< label> 
< input id =checkboxtype =checkbox>同意。 
< / label> 
< / p> 
< p> 
< label> 
< input id =checkboxtype =checkbox>同意。 
< / label> 
< / p> 
< p> 
 < / p> 
< / div> 
< / div> 
 
 
函数SetVetDietsEventsPopup（）{
 jq（＃checkbox）。off（change）。on（change，function（）{
 if（this.checked）{
 jq（＃mainbutton）。removeAttr（disabled）; 
} else {
 jq（＃mainbutton）。attr（disabled ，disabled）; 
} 
}）; （click），function（）{
 if（jq（this）.is（：disabled））{
 jq（＃btnVetDietsConfirmPurchase）。 b $ b return false; 
} else {
 RunAddToCartButtonClickEvent（）; 
 return false; 
} 
}）; 
} 
  

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

解决方案

First的所有id都是唯一的您不能为多个元素使用相同的ID，而不是使用class

  var numItems = $（'。checkbox'）。length; //复选框数量
 var checked = 0; （$（this）.prop（'checked'））{
 checked ++; $ b $（$。$ checkbox'）。 b} 
}）; 
 
 if（numItems === checked）
 $（＃mainbutton）。removeAttr（'disabled'）; 
 else 
 alert（'请检查所有复选框'）; 
  

不要忘记更改所有 id =复选框到 class =checkbox

I need some assistance with the following script. I'm using this as a pop up when someone is trying to add a product to the cart.

Currently the button will become active if one of the check boxes is selected (not sure why it isn't working on fiddle) but what I want is to have it disabled until ALL 3 checkboxes are checked.

I need to mention, total there are 2 different pop ups for 2 different brands. For 1 brand there is only 1 checkbox that needs to be checked for the button to become active but for this 2nd pop up there are 3 checkboxes. So in saying that i need this to work with 1 checkboxes selected as well as needing to have all 3 checkboxes checked.

<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/

解决方案

First of all id is unique you can't use the same id for more than one element instead use 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');

don't forget to change all the id="checkbox" to class="checkbox"

这篇关于必须选中所有3个复选框才能启用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！