填充其他文本框后删除所需属性答案

【问题标题】：Removing required property once other textbox is filled填充其他文本框后删除所需属性
【发布时间】：2021-02-23 01:45:33
【问题描述】：

Hiii.. 我在这里很新，我需要帮助:(

我有两个文本框，其中任何一个都需要填写。我在他们两个都输入了 required 但是一旦我填写了其中一个就需要删除它

<asp:TextBox runat="server" TextMode="text" ID="id1" class="form-control-login" required=""></asp:TextBox>
<asp:TextBox runat="server" TextMode="text" ID="id2" class="form-control-login" required=""></asp:TextBox>

我尝试使用 JS 但没有任何反应。

if (document.getElementById("id1") != "")
            document.getElementById("id1").onkeypress = document.getElementById("id2").removeAttribute("required");

我不知道我还能做什么。请帮帮我T_T

【问题讨论】：

首先不要使用required=""，只使用required
还是一样的：/但我可以知道有什么区别吗？

标签： javascript asp.net vb.net

【解决方案1】：

尝试使用以下 JavaScript 代码：

var input1 = document.getElementById("id1");
var input2 = document.getElementById("id2");

input1.addEventListener('keypress', function() {
    input1.removeAttribute("required");
    input2.removeAttribute("required");
});

input2.addEventListener('keypress', function() {
    input1.removeAttribute("required");
    input2.removeAttribute("required");
});

【讨论】：

它有效！但前提是我从更改为。它们之间有什么显着差异吗？
this话题可以帮到你。

【解决方案2】：

看起来您可能正在使用可能遭受id/name mangling 影响的asp.net Webforms，尤其是在母版页发挥作用时。

让我们使用data attributes 来帮助我们识别群组。例如：

<asp:TextBox runat="server" data-requiredgroup="group1" TextMode="text" ID="id1" class="form-control-login" required=""></asp:TextBox>
<asp:TextBox runat="server" data-requiredgroup="group1" TextMode="text" ID="id2" class="form-control-login" required=""></asp:TextBox>

出于演示目的，我将使用纯 HTML 来连接 javascript，但它仍然可以正常使用您的网络表单

//Get using our data attribute, don't need to worry about name mangling
var groups = document.querySelectorAll("[data-requiredgroup]");
for (var i = 0; i < groups.length; i++) {
  //Add Event Listener
  groups[i].addEventListener("keyup", function() {
    //Get group 
    let group = document.querySelectorAll("[data-requiredgroup=" + this.dataset.requiredgroup + "]");
    for (var g = 0; g < group.length; g++) {
      //Remove if not empty
      if (group[g] != this) { 
        group[g].required = (this.value == "");
      }
    }
  });
}

input:required {
  border-color:red;
}

<div>
  Group 1
  <input type="text" data-requiredgroup="group1" required />
  <input type="text" data-requiredgroup="group1" required />
</div>
<div>
  Group 2
  <input type="text" data-requiredgroup="group2" required />
  <input type="text" data-requiredgroup="group2" required />
  <input type="text" data-requiredgroup="group2" required />
  <input type="text" data-requiredgroup="group2" required />
</div>

【讨论】：