Disable and enable dropdown options using jQuery

Question

I have 2 drop-down like below:

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id ="1st-dd">
   <option value="23" disable_child= "y" class="disableDropdown">No Pocket</option>
   <option value="24" disable_child= "n" selected="selected"
 class="disableDropdown">1 Pocket</option>
   <option value="25" disable_child= "n" class="disableDropdown">2 Pocket</option>
 </select>  
</div>

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id = "flap-drop">
    <option value="26">No Flap</option>
    <option value="27" selected="selected">Flap Pocket</option> 
 </select> 
</div>

What I want is when I select No Pocket in dropdown1, disable both the options of dropdown 2. And enable If any other option is selected in dropdown 1.

Here's what I am trying.

$(".disableDropdown").click(function(){
 //alert($(this).attr("disable_child"));
  if( $(this).attr("disable_child") == "y") 
  {
   $("#flap-drop").attr("disabled",true);
  }
 else{
   $("#flap-drop").attr("disabled",false);
  } 
 });

What's wrong here?

Here's the fiddle for the same.

kapantzak · Accepted Answer · 2016-02-02 06:10:38Z

3

You can use prop():

$('option').prop('disabled', 'disabled')

answered Feb 2, 2016 at 6:10

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2016-02-02 06:19:27Z

2

$("#1st-dd").change(function() {
    $("#flap-drop").attr("disabled", this.value=="23"); 
    // or $("#flap-drop").toggle(this.value!="23");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="1st-dd">
    <option value="23" disable_child="y" class="disableDropdown">No Pocket</option>
    <option value="24" disable_child="n" selected="selected" class="disableDropdown">1 Pocket</option>
    <option value="25" disable_child="n" class="disableDropdown">2 Pocket</option>
  </select>
</div>

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="flap-drop">
    <option value="26">No Flap</option>
    <option value="27" selected="selected">Flap Pocket</option>
  </select>
</div>

Try it this way. Instead of click i used change and compare the values same as you did

edited Feb 2, 2016 at 6:19

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Feb 2, 2016 at 6:12

guradio

15.6k4 gold badges39 silver badges65 bronze badges

4 Comments

Suraj Over a year ago

when I select No pocket in dropdown 1, both the options are getting disabled all right, but even then the dropdown looks like we can still do some select. So Is there anyway that the whole select option gets disabled?

guradio Over a year ago

yes remove the children from the selector when i read you question that is how i understand what you wanted i will update

mplungjan Over a year ago

Please drop the if and the option:selected and do "disabled",this.value=="23")

guradio Over a year ago

@mplungjan i can be a completely different answer my approach is to use the OP previous code and did some modification. pls feel free to update the answer if you think it needs some revision.

Amjath Khan · Accepted Answer · 2016-10-03 09:28:27Z

$("#1st-dd").change(function() {
    $("#flap-drop").attr("disabled", this.value=="23"); 
    // or $("#flap-drop").toggle(this.value!="23");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="1st-dd">
    <option value="23" disable_child="y" class="disableDropdown">No Pocket</option>
    <option value="24" disable_child="n" selected="selected" class="disableDropdown">1 Pocket</option>
    <option value="25" disable_child="n" class="disableDropdown">2 Pocket</option>
  </select>
</div>

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="flap-drop">
    <option value="26">No Flap</option>
    <option value="27" selected="selected">Flap Pocket</option>
  </select>
</div>

Collectives™ on Stack Overflow

Disable and enable dropdown options using jQuery

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related