使用JavaScript禁用HTML表单中的字段

我在HTML表单中有两个字段：

<input type="text" name="name1"/>
<input type="text" name="name2"/>

---

是否有一种使用JavaScript的方法，如果用户在第一个测试框中输入了文本，第二个文本框将被禁用，反之亦然

您可以使用jQuery，通过将事件与方法结合使用来禁用未键入的输入。看起来是这样的：

$function{ var文本长度； $'input'.keyupfunction{ textLength=$this.val.length； 如果textLength>0{ $'input'.notthis.attr'disabled'，'disabled'； }否则{ $'input'.removeAttr'disabled'； } }; }; 输入[类型=文本]：已禁用{ 背景：dddd； } jQuery方式：

首先，您必须创建CSS类“disabled”

<style>
  .disabled {
    opacity: 0.5;
    pointer-events: none;
  }
</style>

及

---

那就行了。当用户更改输入值时，它会将类“disabled”添加到另一个输入。

这是一个清晰的JavaScript回答。使用disabled属性的优点是，即使使用表格，也不可能将输入放入其他字段

在代码段中，如果两个输入字段都为空，则也会重置禁用

var in1=document.getElementByIdinput1， in2=document.getElementByIdinput2； 函数doOnChange{ 如果输入1.value！={ in1.disabled=false； in2.disabled=true； }否则，如果in2.value！={ in1.disabled=true； in2.disabled=false； }如果in1.value=&&in2.value=={ in1.disabled=false； in2.disabled=false； } } in1.addEventListenerkeyup，doOnChange； in2.addEventListenerkeyup，doOnChange； 函数myFunction{ var a=document.getElementById'input1'； var b=document.getElementById'input2'； 如果a.value.length==0&&b.value.length==0{ a、 禁用=错误； b、 禁用=错误； }如果a.value.length==0，则为else{ a、 禁用=真； }如果b.value.length==0，则为else{ b、 禁用=真； } }

---

下面是一个非常简单的示例JSIDLE链接：

<input type="text" name="name1" id="name1" placeholder="Name 1"/>
<input type="text" name="name2"id="name2" placeholder="Name 2"/>

---

提示，尝试使用onBlur事件，这可能是可能的。尝试一下，让我们知道您可以将禁用的属性添加到输入标记。如果您想更改要使用的文本框，该怎么办？只需进行编辑即可解决该问题@CharleyPearce如果没有意义，请告诉我，我将更新我的代码来演示它。@CharleyPearce我刚刚添加了代码，以便在用户删除禁用的属性时删除该属性他们进入的地方。另一个选项是创建一个重置按钮，该按钮将清除任一输入的值并删除禁用的属性。

  $( "input[value='name2']" ).change(function() {
    $("input[value='name1']" ).addClass('disabled');
  });

<input type="text" name="name1" id="name1" placeholder="Name 1"/>
<input type="text" name="name2"id="name2" placeholder="Name 2"/>

var name1 = document.getElementById('name1'),
    name2 =document.getElementById('name2');

name1.onkeyup = function(e) {
    if (name1.value.length > 0) {
    name2.setAttribute('disabled', 'disabled');
  } else {
    name2.removeAttribute('disabled');
  }
}

name2.onkeyup = function(e) {
    if (name2.value.length > 0) {
    name1.setAttribute('disabled', 'disabled');
  } else {
    name1.removeAttribute('disabled');
  }
}