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

Question

我有两个文本框，其中之一需要填写。我在两个文本框中都输入了必需的内容，但是一旦我填写了其中之一，我就需要将其删除<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

Answer 1

看起来您可能正在使用 asp.net Webforms，它可能会受到id/name mangling 的影响，特别是在母版页发挥作用的情况下。

让我们使用数据属性来帮助我们识别组。例如：

<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，但它仍然应该可以很好地与您的 Web 表单配合使用

//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>

Answer 2

尝试使用以下 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");

});