CODEWITHSUNDEEP
jqueryhtml
Suraj
Suraj

Reputation: 2553

Disable and enable dropdown options using jQuery

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.

Upvotes: 1

Views: 18024

Answers (3)

Amjath Khan
Amjath Khan

Reputation: 531

$("#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>

Upvotes: 0

guradio
guradio

Reputation: 15555

$("#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

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

You can use prop():

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

Upvotes: 3

Related Questions