Select2: deaktiviertes Attribut von der Übergabeschaltfläche entfernen, wenn alle nicht-optionalen Auswahlfelder Auswahlen haben

Question

Ich verwende Select2 zum Gestalten und Hinzufügen von Funktionen zu meinen Auswahlfeldern. Ich möchte die Benutzer zwingen, sich durch die Auswahl-Dropdown-Menüs in der richtigen Reihenfolge zu bewegen. Daher deaktiviere ich zuerst alle Auswahlfelder und aktiviere dann das erste. Jedes Mal, wenn der Benutzer eine Auswahl trifft, wird das nächste Auswahlfeld aktiviert. Es wird ein paar Auswahlmöglichkeiten geben, die optional sind. Ich versuche also, das Attribut disabled aus dem Submit-Knopf zu entfernen, wenn alle nicht-optionalen Auswahlen einen Wert haben, aber bis jetzt konnte ich es nicht richtig arbeiten lassen.

Hier ist mein Code so weit:

$(function() { 
 
    $('select').select2({ 
 
     placeholder: '- Select -', 
 
    }); 
 
    $('select').prop('disabled', true); 
 
    $('select:first-of-type').prop('disabled', false); 
 
    $('select').on('select2:select', function(e) { 
 
     $(this).nextAll('select').first().prop('disabled', false); 
 
     $(this).siblings('select').not('.optional').each(function() { 
 
      //console.log($(this).val()); 
 
      if (!$(this).val()) { 
 
       reqSelected = true; 
 
      } else { 
 
       reqSelected = false; 
 
      } 
 
     }); 
 
     console.log(reqSelected); 
 
     if (reqSelected === true) { 
 
      $(input).prop('disabled', false); 
 
     } 
 
    }); 
 
});

label,select { 
 
    display:block; 
 
} 
 

 
label { 
 
    margin-top:20px; 
 
} 
 

 
label:first-child { 
 
    margin-top:0; 
 
} 
 

 
input { 
 
    display:block; 
 
    margin-top:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<div clas="form"> 
 
    <label>1. Select Make</label> 
 
    <select> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    </select> 
 

 
    <label>2. Select Model</label> 
 
    <select> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    </select> 
 
    
 
    <label>3. Select Color (optional)</label> 
 
    <select class="optional"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    </select> 
 
    
 
    <input type="submit" disabled /> 
 
</div>

Hier ist ein JSFiddle wenn Sie mit ihm spielen, um möchten.

Answer 1

Warum versuchen Sie nicht, die Senden-Schaltfläche selbst mit $('input[type="submit"]').prop('disabled',false) zu aktivieren. Sie könnten etwas wie $('select:last-of-type') verwenden, wenn Sie nur darauf abzielen möchten, wenn das letzte Dropdown geändert wird. Sie können auch jede Logik dort mit function()

Answer 2

hinzufügen Sie können korrekte Auswahlen berechnen und wenn alles in Ordnung ist, dann aktivieren Sie senden.

$(document).ready(function(){ 
    var correctSelections = 0, 
     requiredSelections = 3; //or whatever you need 
    $('div.form')on('change', 'select', function(){ 
     if(/*this.is(':correctSelection')*/) 
      correctSelections++; 
     else 
      correctSelections--; 
     if(correctSelections == requiredSelections) 
      $('input[type="submit"]').prop('disabled',false); 
    }); 
});