title: Dynamic checkboxes based on drop down select in Jquery
body: <p>I am trying to hide checkbox based on the select value in Jquery. For an example, if the user selects 1 it hides checkbox 1 so on.</p>
  
  <p>Thanks</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;label for="dropdown"&gt;Dropdown:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;select id="dropdown" name="dropdown"&gt;
  &lt;option value="" disabled="disabled" selected="selected"&gt;Please select an option&lt;/option&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;option value="4"&gt;4&lt;/option&gt;
  
  &lt;/select&gt;
  &lt;div id='checkbox'&gt;
  &lt;label for="id_checkbox_0"&gt;&lt;input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" /&gt; 1&lt;/label&gt;
  &lt;label for="id_checkbox_1"&gt;&lt;input id="id_checkbox_1" name="checkbox" type="checkbox" value="2" /&gt; 2&lt;/label&gt;
  &lt;label for="id_checkbox_2"&gt;&lt;input id="id_checkbox_2" name="checkbox" type="checkbox" value="3" /&gt; 3&lt;/label&gt;
  &lt;label for="id_checkbox_3"&gt;&lt;input id="id_checkbox_3" name="checkbox" type="checkbox" value="4" /&gt; 4&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code> $( document ).ready(function() {  
      $('#checkbox').hide();
      $("#dropdown").change(function() {
          $('#checkbox').show();
          var index = $(':selected', this).index();
          $('input:(#id_checkbox_'+index+')').hide(); 
          $('input:not(#id_checkbox_'+index+')').show();
  
       });
  
   });
  </code></pre>
  
  <p><strong>JSFiddle Link:</strong></p>
  
  <p><a href="http://jsfiddle.net/ffs408u6/4/" rel="nofollow">http://jsfiddle.net/ffs408u6/4/</a></p>