title: jQuery enable/disable checkbox based on checkbox selection
body: <p><strong>EDIT</strong>:  I should have explained that the second set of checkboxes only some are enabled depending on what the user selects from the first set - if a user selects the first checkbox, then the second checkbox in the second set is enabled, whereas if they select the second box in the first set then a different set of checkboxes in the second set are enabled.   Apologies, should have explained more clearly.</p>
  
  <p>I have a two series of checkboxes as follows:</p>
  
  <pre><code>&lt;input class="oDiv" type="checkbox" value="1" /&gt;
  &lt;input class="oDiv" type="checkbox" value="2" /&gt;
  
  &lt;input disabled="disabled" class="Spec" type="checkbox" value="1" /&gt;
  &lt;input disabled="disabled" class="Spec" type="checkbox" value="2" /&gt;
  &lt;input disabled="disabled" class="Spec" type="checkbox" value="5" /&gt; 
  &lt;input disabled="disabled" class="Spec" type="checkbox" value="8" /&gt; 
  &lt;input disabled="disabled" class="Spec" type="checkbox" value="10" /&gt;  
  &lt;input disabled="disabled" class="Spec" type="checkbox" value="30" /&gt;
  </code></pre>
  
  <p>I have some jQuery code that enables the second set of checkboxes based on a selection:</p>
  
  <pre><code>$('.oDiv').on('click', function() {
  var select = $(this).val();
  
   if(select==1){
      $('.Spec:eq(1)').prop('disabled', false);
   }
       else{$('.Spec').prop('disabled', true);}
  });
  </code></pre>
  
  <p>Now, what happens is that when a user selects 1, the correct checkbox in the second list is enabled but when the user clicks off, it doesn't disable.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/pvSeL/" rel="nofollow">http://jsfiddle.net/pvSeL/</a></p>
  
  <p>So what I am trying to achieve is when a user selects a checkbox, the relevant items are enabled and when they uncheck the checkbox they become disabled.</p>