Search code examples
javascripthtmldropdowndisabled-input

Disabling dropdown on another dropdown selection using js

I am stuck up with this on my php page. I cant disable another dropdown on selection of some other dropdown. My HTML code:

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

The js Disable Menu is:

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

I tried a lot of ways . I think it is about the JS. But it seems like the "onchange" doesn't redirect properly. It doesn't even get into the function DisableMenu(). I also tried changing the .disable = "true" to "disabled" and still it doesn't work. I also tried .style.display = "block" and "none". I cant figure out whats really wrong.Please help me out here.

Solution

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