如果在每个组中选中一个复选框，则启用提交答案

【问题标题】：Enable submit if one of checkbox is checked in each group如果在每个组中选中一个复选框，则启用提交
【发布时间】：2021-02-20 18:02:00
【问题描述】：

我在堆栈上发现了一些线程，但它们已经很老了，有点不适合我。

所以我有两个复选框组，其中我通过 django 生成 2 或 3 个复选框，当每个组中至少选中一个复选框时，如何启用我的提交。

这是我发现的类似于我的问题，但它不适用于后端生成的复选框

function check(element) {
  var cb1 = document.getElementById("checkbox1");
  var cb2 = document.getElementById("checkbox2");
  var sub = document.getElementById("submit");
  if (cb1.checked == true  &&  cb2.checked == true)
      sub.disabled = false;
  else
      sub.disabled = true;
  }

这就是我生成复选框的方式

<div class="xTypeDiv">
  {% for x in xType  %}
     <input type="checkbox" value="{{ x.type }}" name="pType" class="pChecbkox" 
     id='checkbox1' onclick="check();">
  {% endfor  %}
</div>

<div class="yTypeDiv">
  {% for x in yType  %}
     <input type="checkbox" value="{{ x.type }}" name="pType" class="pChecbkox" 
     id='checkbox2' onclick="check();">
  {% endfor  %}
</div>

【问题讨论】：

"...但它不适用于后端生成的复选框" - 然后尝试调整它。
如果我知道我会怎么做
你没有说如何你的“后端生成的复选框”是生成的。他们应该有一个固定的ID。你应该能够给他们上课。最肯定的是，您应该能够将每个组分组到一个 div 中。所以你甚至不想知道 backend-id/class 是什么，使用$(".group").each((i,e) => $(this).find("input:checkbox").length > 0 ...
你有多个checkbox1 id。不要在循环中使用 id。 id 必须是唯一的。 .getElementById() 将只获得第一个匹配项。

标签： javascript jquery django

【解决方案1】：

将复选框生成更改为（使用类而不是 id）：

<div class="xTypeDiv">
  {% for x in xType  %}
     <input type="checkbox" value="{{ x.type }}" name="pType" class="pChecbkox typeX" 
     onclick="check();">
  {% endfor  %}
</div>

<div class="yTypeDiv">
  {% for x in yType  %}
     <input type="checkbox" value="{{ x.type }}" name="pType" class="pChecbkox typeY" 
     onclick="check();">
  {% endfor  %}
</div>

然后你可以比较检查的长度：

function check(element) {
  var cb1_checked = document.querySelectorAll(".pChecbkox.typeX:checked");
  var cb2_checked = document.querySelectorAll(".pChecbkox.typeY:checked");
  
  var sub = document.getElementById("submit");
  
  if (cb1_checked.length >= 1  &&  cb2_checked.length >= 1)
      sub.disabled = false;
  else
      sub.disabled = true;
  }
}

然后将pChecbkox 修复为pCheckbox 可能... ;)

【讨论】：