Javascript-选中复选框后更改“ required”属性

Question

我默认情况下隐藏了（带有某种形式的输入）。 如果选中一个复选框，则将显示和及其输入。

因此，默认情况下，“”中的输入文本必须为“非必需”（以完成提交..），但是如果我选中此复选框，如何设置输入文本为“必需”？

 <script language="javascript"> function toggleFields() { var scelta = document.getElementById('mostraDiv'); var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); if (scelta.checked==true) { /* visualizzo e/o spengo i div che voglio */ div1.style.display = "block"; div2.style.display = "none"; } else { div1.style.display = "none"; /* visualizzo e/o spengo i div che voglio */ /* div2.style.display = "block"; */ }; } </script> 

 <div> show div1: <input type="checkbox" name="mostraDiv" id="mostraDiv" value="ok" onchange="toggleFields()" /> </div> <form data-toggle="validator" class="form-horizontal" role="form" id="gestionemenu" name="gestionemenu" action="elaboraForm.php" method="POST"> <div id="div1" style="display: none;"> <h1>Mostro il DIV 1</h1> <input type ="text" class="form-control" name="campo1" /> </div> <div id="div2" style="display: none;"> <h1>Mostro il DIV 2</h1> <input type ="text" name="campo2" value="div2.." /> </div> <div id="div n...."> <h1>ALWAYS VISIBILE</h1> <input type ="text" name="campo3" value="div sempre visibile" /> </div> <input type="submit" name="CONFIRM" /> </form> 

Answer 1

要添加所需的属性，可以使用element.setAttribute('required','required');
并删除它element.removeAttribute('required'); 其中element是必需的输入元素。

阅读更多：
https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Answer 2

您可以在选择输入并设置其必需属性时执行此操作，如下所示

div1.getElementsByTagName('input')[0].setAttribute('required', 'required');

这将在id为div1 div中获得输入并将其设置为必填。

Answer 3

首先，请不要使用Javascript隐藏/显示页面的关键元素。 这样一来，那些选择禁用Javascript或使用较旧浏览器的人就无法访问您的页面。一种可接受的解决方案是使用CSS3隐藏/显示表单部分，并添加一个仅在旧版浏览器上显示的简单文本通知，诸如“仅在选中此框后才需要此部分”之类的内容。

要回答您的问题，您可以简单地使用以下方法：

function setRequiredFields(section, required) {
  for (var el of section.querySelectorAll("input")) {
    if (required) {
      el.setAttribute("required", "");
    } else {
      el.removeAttribute("required");
    }
  }
}

然后根据需要致电：

setRequiredFields(document.getElementById("div1"), true);

最后，只是要确保–添加“必需”属性实际上不会为您的页面增加安全性（因为浏览器有责任强制执行要求）。