使用 Javascript 禁用 HTML 表单中的字段取决于从下拉列表中选择的值答案

【问题标题】：Disable a field in HTML form using Javascript depend on a chosen value from a dropdown list使用 Javascript 禁用 HTML 表单中的字段取决于从下拉列表中选择的值
【发布时间】：2016-03-31 00:48:17
【问题描述】：

我是 Javascript 新手。我尝试搜索网站以自己解决这个问题，但我没有成功。我正在使用 HTML 和 Javascript 创建一个表单。

我被困在以下问题上，不确定我错过了什么：

用户将选择一个国家，根据用户选择的内容，我需要禁用美国字段或城市/省字段。

如果用户从 id="txtCountries" 中选择“美国”，则 id="txtCustomerStates" 保持启用状态，而 id="txtCityProvince" 则禁用。

如果用户选择任何其他国家而不是“美国”，则反之亦然 - id="txtCustomerStates" 已禁用，id="txtCityProvince" 已启用。

目前 - 无论选择什么，启用 txtCityProvince 而禁用 txtCustomerStates。

以下是我所做的：Javascript 文件 - 文件名 disable.js：

//If user selects "United States" - City/Province (International) will be disabled
//If user does not selects "United States - State (USA) will be disabled

function disableState() {
    if (document.getElementById("txtCountries").value === "United States") 
    {
        // document.getElementById("txtCustomerStates").disabled='false';
        document.getElementById("txtCityProvince").disabled='true';
    }
    else  
    {
        // document.getElementById("txtCityProvince").disabled='false';
        document.getElementById("txtCustomerStates").disabled='true';
    } 
}

HTML 文件：国家部分：

<div id="divCountries" class="fieldRow">
<div class="leftLabel labelWidth20">
<label for="txtcountries">Country:</label>
</div>
 <div class="LeftField">
   <div class="formField34">
     <select id="txtCountries" type="text" name="Countries" alt="Countries"   
     title="Countries" onchange="javascript:disableState();">
       <option value=""></option>
       <option value="Afghanistan">Afghanistan</option>
       <option value="Albania">Albania</option>
       <option value="Algeria">Algeria</option>
       <option value="UnitedStates">United States</option>
      </select>
    </div>
 </div>

美国部分：

 <div class="leftLabel labelWidth20">
 <label for="txtCustomerStates">State (USA):</label>
 </div>
 <div class="LeftField">
 <div class="formField40">
  <select id="txtCustomerStates" type="text" name="State" alt="United 
   States" title="United States">
      <option value=""></option>
      <option value="Alabama">Alabama</option>
      <option value="Alaska">Alaska</option>
      <option value="American Samoa">American Samoa</option>
      <option value="Arizona">Arizona</option>
      <option value="Arkansas">Arkansas</option>
   </select>
  </div>
  </div>

非美国部分：

<div id="divCityProvince" class="fieldRow">
 <div class="leftLabel labelWidth20">
  <label for="txtCityProvince">City/Province/Town<br>(International):  
  </label>
</div>
<div class="formField34">
<input id="txtCityProvince" type="text" class="textfield" 
 alt="City/Province/Town (International)" title="City/Province/Town 
 (International)">
 </div>  
</div>

提前感谢您的帮助，是

【问题讨论】：

标签： javascript html

【解决方案1】：

整个解决方案:) 只修改了 javascript 部分。

<div id="divCountries" class="fieldRow">
<div class="leftLabel labelWidth20">
<label for="txtcountries">Country:</label>
</div>
 <div class="LeftField">
   <div class="formField34">
     <select id="txtCountries" type="text" name="Countries" alt="Countries"   
     title="Countries" onchange="disableState()">
       <option value=""></option>
       <option value="Afghanistan">Afghanistan</option>
       <option value="Albania">Albania</option>
       <option value="Algeria">Algeria</option>
       <option value="UnitedStates">United States</option>
      </select>
    </div>
 </div>

 <div class="leftLabel labelWidth20">
 <label for="txtCustomerStates">State (USA):</label>
 </div>
 <div class="LeftField">
 <div class="formField40">
  <select id="txtCustomerStates" type="text" name="State" alt="United 
   States" title="United States">
      <option value=""></option>
      <option value="Alabama">Alabama</option>
      <option value="Alaska">Alaska</option>
      <option value="American Samoa">American Samoa</option>
      <option value="Arizona">Arizona</option>
      <option value="Arkansas">Arkansas</option>
   </select>
  </div>
  </div>


<div id="divCityProvince" class="fieldRow">
 <div class="leftLabel labelWidth20">
  <label for="txtCityProvince">City/Province/Town<br>(International):  
  </label>
</div>
<div class="formField34">
<input id="txtCityProvince" type="text" class="textfield" 
 alt="City/Province/Town (International)" title="City/Province/Town 
 (International)">
 </div>  
</div>

<script>
function disableState() {

    if (document.getElementById("txtCountries").value === "UnitedStates") 
    {
       document.getElementById("txtCustomerStates").disabled=false;
        document.getElementById("txtCityProvince").disabled='true';

    }
    else  
    {
    document.getElementById("txtCityProvince").disabled=false;        
    document.getElementById("txtCustomerStates").disabled='true';

    } 
}
</script>

【讨论】：

谢谢大家 - 它有效 - 我非常感谢帮助和快速响应。是
如果您喜欢任何解决方案，请投票 .... 以便其他人可以轻松找到它

【解决方案2】：

看到这个fiddle

这是因为从 document.getElementById("txtCountries").value 返回的值是 UnitedStates 而不是 United States。

请注意美国的选项如下

<option value="UnitedStates">United States</option>

请注意，值中的United 和States 之间没有空格。

function disableState() {
  if (document.getElementById("txtCountries").value === "UnitedStates") {
    document.getElementById("txtCityProvince").disabled = 'true';
  } else {
    document.getElementById("txtCustomerStates").disabled = 'true';
  }
}

【讨论】：

【解决方案3】：

试试这个;)

在value="UnitedStates"中加一个空格：

<option value="United States">United States</option>

【讨论】：