使用js禁用另一个下拉选择的下拉菜单答案

【问题标题】：Disabling dropdown on another dropdown selection using js使用js禁用另一个下拉选择的下拉菜单
【发布时间】：2017-05-16 08:32:14
【问题描述】：

我在我的 php 页面上遇到了这个问题。我无法在选择其他下拉菜单时禁用另一个下拉菜单。我的 HTML 代码：

<div class="form-group" >
    <label for="status" class="col-sm-3 control- label">Dropdown1</label>
         <div class="col-sm-6">
        <select  name="status" id="status" onchange="DisableMenu()">                                 
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>                               
        </select>            
    </div>
</div> 
 <div class="form-group" >
    <label for="status" class="col-sm-3 control-label">Dropdown2</label>
     <div class="col-sm-6">
        <select name="progress" id="progress" >                                 
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
                 <option>4</option>                               
        </select>            
    </div>
</div>

js禁用菜单是：

<script type="text/javascript">

    function DisableMenu()
    {
        if(document.getElementById("status").value=="1" || document.getElementById("status").value == "2")
        {
            document.getElementById("progress").disabled = "true";
        }
        else
        {
            document.getElementById("progress").disabled = "false";
        }                       
    }                   
</script>

我尝试了很多方法。我认为这与JS有关。但似乎“onchange”没有正确重定向。它甚至没有进入函数 DisableMenu()。我还尝试将 .disable = "true" 更改为 "disabled"，但它仍然不起作用。我也试过 .style.display = "block" 和 "none"。我不知道什么是真正的问题。请在这里帮助我。

【问题讨论】：

正确拼写getElemnetById到getElementById
谢谢，我没有注意到。但它不能完全工作。它在每次更改时完全禁用。不检查条件
它首先启用，然后在更改时禁用。不检查值
将此document.getElementById("progress").disabled = "false"; 更改为document.getElementById("progress").disabled = false; @Alif Noushad

标签： javascript html dropdown disabled-input

【解决方案1】：

改一下

document.getElementById("progress").disabled = "false";

到

document.getElementById("progress").disabled = false;

function DisableMenu(){
   
  if(document.getElementById("status").value=="1" || document.getElementById("status").value == "2"){
      document.getElementById("progress").disabled = true;
  } else {
    document.getElementById("progress").disabled = false;
  } 
                  
}

<div class="form-group" >
    <label for="status" class="col-sm-3 control- label">Dropdown1</label>
         <div class="col-sm-6">
        <select  name="status" id="status" onchange="DisableMenu()">                                 
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>                               
        </select>
    </div>
</div> 
<div class="form-group" >
    <label for="status" class="col-sm-3 control-label">Dropdown2</label>
     <div class="col-sm-6">
        <select name="progress" id="progress" >                                 
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
                 <option>4</option>                               
        </select>
    </div>
</div>

【讨论】：