如果填充了第二个输入（最新）字段，则禁用输入字段答案

【问题标题】：Disable an input field if second input (most current) field is filled如果填充了第二个输入（最新）字段，则禁用输入字段
【发布时间】：2013-11-05 15:10:53
【问题描述】：

我对 javascript 很陌生。我阅读了此链接并尝试对其进行自定义，但它不起作用：Disable an input field if second input field is filled

我想让人们在两个选项之间切换——城市和邮政编码。我想启用他们最后选择的任何字段并禁用另一个。例如，如果他们在邮政编码选项卡上并按下提交按钮，则无论邮政编码中的输入是什么，都会提交，而不是城市，反之亦然。

html 是：

<ul class="tabs">
<li><a class="border-radius top med" href="#city">City</a></li>
<li><a class="border-radius top med" href="#zipcode">Zipcode</a></li>
</ul>
<div id="city"><label class="IDX-advancedText">City</label>
<select id="aht-home-city" name="city[]" class="IDX-select " autocomplete="off">
<option value="2115">Austin</option>
<option value="2718">Bartlett</option>
</div>
<div id="zipcode"><label class="IDX-advancedText">Zipcode</label>
<input class="IDX-advancedBox IDX-advWildText" id="IDX-aw_zipcode" type="text"
   maxlength="255" name="aw_zipcode" value="" /></div>

脚本是：

var dis1 = document.getElementById("city");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
  document.getElementById("zipcode").disabled = true;
  }
}
var dis2 = document.getElementById("zipcode");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
  document.getElementById("city").disabled = true;
 }
}

非常感谢任何帮助！网址是http://austinhometeam.staging.wpengine.com/joyce-newsletter/

【问题讨论】：

首先，你选择的ID是“aht-home-city”而不是“city”。您输入的 ID 是“IDX-aw_zipcode”而不是“zipcode”。当您定义第二个 onchange 时，您也有一个复制/粘贴错误，您在 dis1 上定义它，但您想在 dis2 上定义它
除了@forumma 所说的，这对你的用户来说是非常糟糕的行为，他们不会明白为什么他的邮政编码输入框突然被禁用了。反之亦然。另外，用户现在怎么会后悔自己的选择？
感谢大家的帮助。我需要禁用其中一个。如果他们输入的邮政编码与城市不匹配，则返回结果将为 0。当然，我可以编写在选择邮政编码时拉出城市的参数，反之亦然。但是，我还没有足够的 javascript 来编写代码。

标签： javascript

【解决方案1】：

就像我在评论中告诉你的那样，你需要更改“getElementById”中的 ID。

当另一个为空时，我还添加了重新启用的字段。

我在选择中添加空值，选择null时，邮政编码的字段返回启用。

HTML

<ul class="tabs">
<li><a class="border-radius top med" href="#city">City</a></li>
<li><a class="border-radius top med" href="#zipcode">Zipcode</a></li>
</ul>
<div id="city"><label class="IDX-advancedText">City</label>
<select id="aht-home-city" name="city[]" class="IDX-select " autocomplete="off">
<option value=""></option>
<option value="2115">Austin</option>
<option value="2718">Bartlett</option>
</select>
</div>
<div id="zipcode"><label class="IDX-advancedText">Zipcode</label>
<input class="IDX-advancedBox IDX-advWildText" id="IDX-aw_zipcode" type="text"
   maxlength="255" name="aw_zipcode" value="" /></div>

Javascript：

var dis1 = document.getElementById("aht-home-city");
var dis2 = document.getElementById("IDX-aw_zipcode");

dis1.onchange = function () {
  if (dis1.value !== "" || dis1.value.length > 0) {
    dis2.disabled = true;
  } else {
    dis2.disabled = false;
  }
};


dis2.onchange = function () {
  if (dis2.value !== "" || dis2.value.length > 0) {
    dis1.disabled = true;
  } else {
    dis1.disabled = false;
  }
};

有一个工作示例： JSBin Example

【讨论】：

【解决方案2】：

寻找类似的行为？

var last = "";

var dis1 = document.getElementById("aht-home-city");
dis1.onchange = function () {
    last = "city";
    document.getElementById("IDX-aw_zipcode").disabled = true;
}
var dis2 = document.getElementById("IDX-aw_zipcode");
dis2.onchange = function () {
    last = "zipcode";
    if (this.value != "" || this.value.length > 0) {
        document.getElementById("aht-home-city").disabled = true;
    }
}

检查这个jsFiddle

注意：HTML 中还缺少一个 </select> 标记。

【讨论】：