title: Select2 - On select, remove disabled attribute from next select element
body: <p>I am using <a href="https://select2.github.io/" rel="nofollow">Select2</a> to style my select elements and I would like to have it so that all but the first dropdown are disabled initially and then when an option is selected from the first dropdown, the disabled attribute is removed from the next dropdown(forcing the user to make their selections in order). Here's what I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('select').select2();
  $('select').prop('disabled', true);
  $('select:first-of-type').prop('disabled', false);
  
  $('select').on('select2:select', function(e) {
    $(this).next('select').prop('disabled', false); // remove disabled prop from next select
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"&gt;&lt;/script&gt;
  
  &lt;select&gt;
    &lt;option&gt;Test 1&lt;/option&gt;
    &lt;option&gt;Test 2&lt;/option&gt;
    &lt;option&gt;Test 3&lt;/option&gt;
    &lt;option&gt;Test 4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select&gt;
    &lt;option&gt;Test 1&lt;/option&gt;
    &lt;option&gt;Test 2&lt;/option&gt;
    &lt;option&gt;Test 3&lt;/option&gt;
    &lt;option&gt;Test 4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select&gt;
    &lt;option&gt;Test 1&lt;/option&gt;
    &lt;option&gt;Test 2&lt;/option&gt;
    &lt;option&gt;Test 3&lt;/option&gt;
    &lt;option&gt;Test 4&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Unfortunately <code>$(this).next('select')</code> doesn't seem to be targeting the next element.</p>