计算表单上的多个复选框,启用按钮

时间:2016-11-16 17:57:01

标签: javascript php html forms

我已经尝试了至少十几个不同的代码来使这个工作无济于事。我有一个动态HTML表单,要求学生选择他们已完成的10个先决条件中的哪一个。一旦他们选择至少3,我想要一个继续按钮启用。该按钮触发另一个功能,以便他们可以继续使用表单。我无法启用按钮。我试图坚持使用Javascript,因为我不确定我们的网站是否有可用的JQuery库。我们的Web服务器是Cascade CMS v8.0.2(176cf)。

以下是表单此部分的特定代码和HTML的副本。表单上的其他所有功能都符合我的预期。任何帮助,为什么这可能不起作用将不胜感激。

在实际表单中,我在 div id =" blkPreReq" style =" display:none;" >标记仅在满足特定条件时显示



function numberOfCheckboxesSelected() {
  return document.querySelectorAll('input[type=checkbox][name="PreReq[]"]:checked').length;
}

function onChange() {
  document.getElementById('blkCountBtn').style.display = 'block';
  document.getElementById('btnCountBtn').disabled = numberOfCheckboxesSelected() < 3;
}

document.getElementById('ApptInfo').
addEventListener('change', onChange, false);
&#13;
<form id="ApptInfo">
<div id="blkPreReq">
  <fieldset id="lblPreReq">
    <legend>Please indicate the prerequisites you have completed?*</legend>
    <input id="PreReqBio" name="PreReq[]" type="checkbox" value="Biology" />
    <label for="PreReqBio">Principles of Biology</label>
    <br />
    <input id="PreReqHA" name="PreReq[]" type="checkbox" value="Anatomy" />
    <label for="PreReqHA">Human Anatomy</label>
    <br />
    <input id="PreReqHP" name="PreReq[]" type="checkbox" value="Physiology" />
    <label for="PreReqHP">Human Physiology</label>
    <br />
    <input id="PreReqChem" name="PreReq[]" type="checkbox" value="Chemistry" />
    <label for="PreReqChem">Elementary Chemistry</label>
    <br />
    <input id="PreReqBioOrg" name="PreReq[]" type="checkbox" value="Bio-Organic" />
    <label for="PreReqBioOrg">Elementary Bio-Organic Chemistry</label>
    <br />
    <input id="PreReqStats" name="PreReq[]" type="checkbox" value="Statistics" />
    <label for="PreReqStats">Introduction to Statistical Inference</label>
    <br />
    <input id="PreReqNutr" name="PreReq[]" type="checkbox" value="Nutrition" />
    <label for="PreReqNutr">Nutrition Intervention</label>
    <br />
    <input id="PreReqDev" name="PreReq[]" type="checkbox" value="Development" />
    <label for="PreReqDev">Human Development: Lifespan</label>
    <br />
    <input id="PreReqMicro" name="PreReq[]" type="checkbox" value="Microbiology" />
    <label for="PreReqMicro">Medical Microbiology</label>
    <br />
    <input id="PreReqPatho" name="PreReq[]" type="checkbox" value="Pathophysiology" />
    <label for="PreReqPatho">Pathophysiology</label>
  </fieldset>
</div>
<div id="blkCountBtn" style="display: none;">
  <button disabled="disabled" id="btnCountBtn" name="CountBtn" onclick="NextProgram()" type="button">Continue</button>
</div></form>
&#13;
&#13;
&#13;

0 个答案:

没有答案