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

Question

我在 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"。我不知道到底是什么 wrong.Please 帮帮我。

Answer 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>

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

Disabling dropdown on another dropdown selection using js

html

javascript

disabled-input

dropdown