Javascript - 根据表单选择切换 html5 所需的 =""属性

Question

我有一个即将完成的脚本，但我无法弄清楚最后一部分。 Javascript 使复选框根据下拉选择显示或消失(这非常有效)。但如果该复选框存在(我无法弄清楚的部分)，我会尝试将该复选框设置为“必需”。

我在复选框字段上使用了 htm5 required="" 属性，但即使选择了第三个选项，表单仍会尝试验证它，这会完全隐藏复选框。

有没有办法根据下拉列表的选择或任何其他建议来打开/关闭required=""？

<script>    
   function getTerms(select){
        var selectedString = select.options[select.selectedIndex].value;
        if(selectedString == "1" || selectedString == "2")
        {
            document.getElementById("terms_target").style.display = "block";
        }else {
            document.getElementById("terms_target").style.display = "none";
        }
    }
</script>

<form action="process_affiliate.php" method="post" onchange="getTerms(this)" >
<select name="InquiryType" required="">
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
  <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

Answer 1

这是使用 addEventListener 的较新版本

window.addEventListener("DOMContentLoaded", () => {
  const sel = document.querySelector("[name=InquiryType]"),
    terms = document.getElementById("terms_target"),
    form = document.getElementById("myForm"),
    agree = form.checked; // checked is a poor name for a field
  toggleAgree = () => {
    const show = ["1", "2"].includes(sel.value);
    terms.hidden = !show;
    agree.required = show;
  };
  sel.addEventListener("change", toggleAgree)
  toggleAgree(); // initialise
})

<form action="process_affiliate.php" id="myForm" method="post">
  <select name="InquiryType" required>
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <div id="terms_target" hidden>
    <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
  </div>
  <input type="submit" value="Submit">
</form>

旧版本

window.onload=function() {
  var sel = document.getElementsByName("InquiryType")[0];
  sel.onchange=function() {
    var selectedString = this.value,
        show = selectedString == "1" || selectedString == "2",
        terms = document.getElementById("terms_target"),
        checked=document.getElementsByName("checked")[0];
    terms.style.display = show?"block":"none";
    if (show) checked.setAttribute("required","required");
    else checked.removeAttribute("required");
  }
  sel.onchange(); // initialise
}

<form action="process_affiliate.php" method="post">
<select name="InquiryType" required="">
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
  <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>