仅当文本字段被阻止时才在文本字段中插入必需的属性答案

【问题标题】：insert required attribute in a text field only if it is blocked仅当文本字段被阻止时才在文本字段中插入必需的属性
【发布时间】：2022-07-27 23:04:47
【问题描述】：

我想在文本字段中使用 required 属性，前提是它显示出来。选择与否取决于单选按钮。

我做不到，谁能帮我弄清楚怎么做？

function ShowHideDiv() {
  var mail = document.getElementById("mail");
  var newsletter = document.getElementById("newsletter");
  newsletter.style.display = mail.checked ? "block" : "none";

  if (document.getElementById("newsletter").style.display == 'block') {
    newsletter.setAttribute('required', 'required');
  }
}

<form method="post" action="test.php">
  <input type="text" name="name" size="15" maxlength="15" required>
  <input type="radio" id="mobile" value="mobile" name="contact" onclick="ShowHideDiv()" <input type="radio" id="mail" value="mail" name="contact" required onclick="ShowHideDiv()" <div id="newsletter" style="display: none">
  <input type="text" name="newsletter" id="newsletter" size="15" maxlength="15">
  </div>
  <button type="submit" name="submit">subscribe</button>
</form>

【问题讨论】：

标签： javascript

【解决方案1】：

您在这一行的 html 中有错字

<input type="radio" id="mobile" value="mobile" name="contact" onclick="ShowHideDiv()" <input type="radio" id="mail" value="mail" name="contact" required onclick="ShowHideDiv()" <div id="newsletter" style="display: none">

此外，您可能仍然缺少很多逻辑，但这正在修复您的脚本，该脚本按照您编写 js 部分的方式按预期工作。

function ShowHideDiv() {
  var mail = document.getElementById("mail");
  var newsletter = document.getElementById("newsletter");
  newsletter.style.display = mail.checked ? "block" : "none";

  if (document.getElementById("newsletter").style.display == 'block') {
    newsletter.setAttribute('required', 'required');
  }
}

<form method="post" action="test.php">
  <input type="text" name="name" size="15" maxlength="15" required>
  <input type="radio" id="mobile" value="mobile" name="contact" onclick="ShowHideDiv()"> <input type="radio" id="mail" value="mail" name="contact" required onclick="ShowHideDiv()"> <div id="newsletter" style="display: none">
  <input type="text" name="newsletter" id="newsletter" size="15" maxlength="15">
  </div>
  <button type="submit" name="submit">subscribe</button>
</form>

【讨论】：