Enable/disable Button When Multiple Dropdown Value Is Selected

I've been trying jQuery code to Enable a button when all html select dropdown value is selected or Disable button if even a single is not selected. Here is what I have been tried s

Solution 1:

No need to loop - also I trigger change onload to disable when (re)loading:

$(function() {
  $('.picker').on('change', function() {
    var $sels = $('.picker option:selected[value=""]');
    $("#Testing").attr("disabled", $sels.length > 0);
  }).change();
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div><selectclass="picker"><optionvalue="">Select</option><optionvalue="1">A</option><optionvalue="2">B</option><optionvalue="3">C</option></select></div><div><selectclass="picker"><optionvalue="">Select</option><optionvalue="1">A</option><optionvalue="2">B</option><optionvalue="3">C</option></select></div><div><selectclass="picker"><optionvalue="">Select</option><optionvalue="1">A</option><optionvalue="2">B</option><optionvalue="3">C</option></select></div><div><selectclass="picker"><optionvalue="">Select</option><optionvalue="button-a">A</option><optionvalue="button-b">B</option><optionvalue="button-c">C</option></select></div><div><selectclass="picker"><optionvalue="">Select</option><optionvalue="button-a">A</option><optionvalue="button-b">B</option><optionvalue="button-c">C</option></select></div><div><inputid="Testing"type="button"class="btn btn-info"value="Testing" /></div>

Solution 2:

Use below code SelectList[i].value instead of SelectList[i].val()

 $(function () {
        $('.picker').on('change', function () {     
            varSelectList = $('.picker');
            //Here i'll find how many dropdown are presentfor (var i = 0; i < SelectList.length ; i++) {
                //Here i need to check each dropdown value whether it selected or notif (SelectList[i].value != "") {
                    //If all dropdown is selected then Enable button
                    $("#Testing").attr("disabled", true);
                }
                else {
                    //Disable button if any dropdown is not selected
                    $("#Testing").attr("disabled", false);
                }
            }
        }); 
    });

Solution 3:

  $(document).ready(function() {
                $('#submitbtn').attr('disabled', true);
                
                $('.datum').on('change', function() {
                  var alledatum = $('.datum');
                    if (alledatum[0].value != ""&& alledatum[1].value != "") {                  
                      $('#submitbtn').removeAttr("disabled");
                    } else {
                      $('#submitbtn').attr('disabled', true);
                      
                    }
                  });
              });

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="col-lg-4"><label>Geburtsdatum:<spanclass="text-danger">*</span></label><inputtype="date"id="geburtsdatum"class="datum form-control "name="Geburtsdatum"value=""required></div><divclass="col-lg-4"><label>Startdatum:<spanclass="text-danger">*</span></label><selectid="startdatum"class="datum form-control "name="Startdatum"required><optionvalue="">---hello---</option><optionvalue="1">hello austria</option><optionvalue="2">hello austrilia</option></select><divclass="col-lg-12"align="center"><buttontype="submit"name="Claculate"id="submitbtn"value="Submit"class="btn btn-primary btn-lg">Claculate-Offer</button></div>

when i work with more than one kind of input like selection-tag ,input-tag etc in this case make a SAME class inside the html tag then work on it