Select2：如果所有非可选的选择框都有选择，则从“提交”按钮中删除禁用的属性

Question

I am using Select2 to style and add functionality to my select boxes. I want to force the users to move through the select dropdowns in order, so I start by disabling all select boxes and then enabling the first one. Each time the user makes a selection, the next select box becomes enabled. There will be a few selections that are optional so what I am trying to do is remove the disabled attribute from the submit button if all the non-optional selections have a value, but so far I have not been able to get it working correctly.

Here is my code so far:

 $(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> 

Here's a JSFiddle if you want to play around with it.

Answer 1

Why don't you try enabling the submit button itself with $('input[type="submit"]').prop('disabled',false) . You could use something like $('select:last-of-type') if only want to target it when the last dropdown is changed. You can also add any logic in there with function()

Answer 2

You can calculate correct selections and when everything is OK then enable submit.

$(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);
  });
});