使用js禁用另一个下拉列表选择的下拉列表

时间:2017-05-16 08:32:15

标签: javascript html dropdown disabled-input

我在我的php页面上坚持了这个。我无法在选择其他一些下拉列表时禁用另一个下拉列表。 我的HTML代码:

canActivate

js禁用菜单是:

<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的。但似乎“onchange”没有正确重定向。它甚至没有进入函数DisableMenu()。我也尝试将.disable =“true”更改为“disabled”,但仍然无法正常工作。 我也试过.style.display =“block”和“none”。 我无法弄清楚什么是错的。请帮帮我。

1 个答案:

答案 0 :(得分:0)

change this

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

to

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>