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

要添加requried属性，您可以使用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来隐藏/显示表单部分，并添加仅在旧版浏览器上显示的简单文本通知，类似于＆＃34;仅当您选中框＃34;

时才需要此部分

要回答您的问题，您可以使用以下内容：

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);

最后，只是为了确保 - 添加一个＆＃34; required＆＃34;属性几乎不会为您的网页添加任何安全性（因为浏览器是否有责任执行这些要求）。

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

3 个答案: