title: jQuery checkbox auto disable and re-enable
body: <p>I have my HTML code and my JavaScript code like this (I'm using jQuery)</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;input type="checkbox" name="type" value="program" id="box-1" /&gt; Desktop Programming
  &lt;select name="lang-1" id="select-1" disabled&gt;
      &lt;option value="c"&gt;C/C++&lt;/option&gt;
      &lt;option value="vb"&gt;VB&lt;/option&gt;
      &lt;option value="cs"&gt;C#&lt;/option&gt;
  &lt;/select&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;input type="checkbox" name="type" value="web" id="box-2" /&gt; Web Development
  &lt;select name="lang-2" id="select-2" disabled&gt;
      &lt;option value="asp"&gt;ASP&lt;/option&gt;
      &lt;option value="php"&gt;PHP&lt;/option&gt;
      &lt;option value="ror"&gt;Ruby on Rails&lt;/option&gt;
  &lt;/select&gt;&lt;br /&gt;&lt;br /&gt;
  </code></pre>
  
  <p>JavaScript (jQuery) :</p>
  
  <pre><code>$(document).ready(function(){
      var x;
      $("#box-" + x).click(function(){
          var $this = $(this);
          if ($this.is(":checked")) {
              $("#select-" + x).prop('disabled', false);
          } else {
              $("#select-" + x).prop('disabled', true);
          }
      });
  });
  </code></pre>
  
  <p>And I want when I checked the programming checkbox, the programming select option (beside the checkbox) is enable. As well as when I checked the web dev checkbox, the web dev select option is enable. But my code doesn't work. Can anybody help me?</p>