Disabling dropdown on another dropdown selection using js

Question

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.

Thanks I didnt notice that. But It dont work completely. It completely disables on every change. doesnt check conditions — Alif Noushad
– Alif Noushad, Commented May 16, 2017 at 8:53
its enabled first and then on change, disables. doesnt check values — Alif Noushad
– Alif Noushad, Commented May 16, 2017 at 9:05
change this document.getElementById("progress").disabled = "false"; to document.getElementById("progress").disabled = false; @Alif Noushad — XYZ
– XYZ, Commented May 16, 2017 at 9:13

XYZ · Accepted Answer · 2017-05-16 11:27:38Z

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>

Collectives™ on Stack Overflow

Disabling dropdown on another dropdown selection using js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related