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

【问题标题】：Use JavaScript to disable fields in a HTML form使用 JavaScript 禁用 HTML 表单中的字段
【发布时间】：2016-02-12 15:18:20
【问题描述】：

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

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

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

【问题讨论】：

提示，尝试使用 onBlur 事件，这可能是可能的。试试看，让我们知道
可以在输入标签中添加属性disabled。

标签： javascript html forms

【解决方案1】：

您可以使用 jQuery 来做到这一点，方法是使用 keyup() 事件和 not() 方法禁用未键入的输入。看起来像这样：

$(function() {
  var textLength;
  $('input').keyup(function() {
    textLength = $(this).val().length;
    if (textLength > 0) {
       $('input').not(this).attr('disabled','disabled');
    } else {
       $('input').removeAttr('disabled');
    }
  });
});

input[type="text"]:disabled {
    background: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1"/>
<input type="text" name="name2"/>

【讨论】：

如果要更改使用哪个文本框怎么办？
刚刚进行了编辑以解决 @CharleyPearce 让我知道它是否没有意义，我将更新我的代码来演示它。
@CharleyPearce 我刚刚添加了代码以删除disabled 属性，如果用户删除他们输入的内容。另一种选择是创建一个“重置”按钮，该按钮将清除任一输入的值并删除 disabled 属性。

【解决方案2】：

这是一个非常简单的例子（下面的jsfiddle链接）：

<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');
  }
}

https://jsfiddle.net/Neviton/81zzjabk/

【讨论】：

【解决方案3】：

jQuery方式：

首先，您必须创建 CSS 类“已禁用”。

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

然后您将事件侦听器“更改”添加到您的输入中。

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

和

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

这样就可以了。当用户更改输入值时，它会将“禁用”类添加到另一个输入。

【讨论】：

【解决方案4】：

这是一个清晰的 JavaScript 答案。使用 disabled 属性的好处是，即使使用制表，也不可能将输入放入其他字段。

在 sn-p 中，如果两个输入字段都为空，则禁用也会重置。

var in1 = document.getElementById("input1"),
    in2 = document.getElementById("input2");

function doOnChange() {
  if (in1.value != "") {
    in1.disabled = false;
    in2.disabled = true;
  } else if (in2.value != "") {
    in1.disabled = true;
    in2.disabled = false;
  } if (in1.value == "" && in2.value == "") {
    in1.disabled = false;
    in2.disabled = false;
  }
}

in1.addEventListener("keyup", doOnChange);
in2.addEventListener("keyup", doOnChange);

<input id="input1" />
<input id="input2" />

【讨论】：

【解决方案5】：

function myFunction() {
  var a = document.getElementById('input1');
  var b = document.getElementById('input2');
  if (a.value.length == 0 && b.value.length == 0) {
    a.disabled = false;
    b.disabled = false;
  } else if (a.value.length == 0) {
    a.disabled = true;
  } else if (b.value.length == 0) {
    b.disabled = true;
  }
}

<input type="text" id="input1" onkeyup="myFunction()" />
<input type="text" id="input2" onkeyup="myFunction()" />

【讨论】：