Disable and enable dropdown options using jQuery
<p>I have 2 drop-down like below:</p>

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

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

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

<p>Here's what I am trying.</p>

<pre><code>$(".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);
  } 
 });
</code></pre>

<p>What's wrong here?</p>

<p><a href="https://jsfiddle.net/gfp4kbvg/" rel="nofollow">Here's</a> the fiddle for the same.</p>