title: Disable and enable dropdown options using jQuery
body: <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>