选择多个下拉值时启用/禁用按钮

Question

我一直在尝试使用 jQuery 代码在选择所有 html 选择下拉值时启用按钮，或者在未选择单个按钮时禁用按钮。

这是我迄今为止尝试过的，但我的代码无法正常工作。有什么建议吗？

$(function() {
  $('.picker').on('change', function() {
    var SelectList = $('.picker');
    //Here i'll find how many dropdown are present
    for (var i = 0; i < SelectList.length; i++) {
      //Here i need to check each dropdown value whether it selected or not
      if (SelectList[i].val() != "") {
        //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);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="button-a">A</option>
    <option value="button-b">B</option>
    <option value="button-c">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="button-a">A</option>
    <option value="button-b">B</option>
    <option value="button-c">C</option>
  </select>
</div>

<div>
  <input id="Testing" type="button" class="btn btn-info" value="Testing" />
</div>

Answer 1

无需循环 - 我也触发更改 onload 以在（重新）加载时禁用：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="button-a">A</option>
    <option value="button-b">B</option>
    <option value="button-c">C</option>
  </select>
</div>

<div>
  <select class="picker">
    <option value="">Select</option>
    <option value="button-a">A</option>
    <option value="button-b">B</option>
    <option value="button-c">C</option>
  </select>
</div>

<div>
  <input id="Testing" type="button" class="btn btn-info" value="Testing" />
</div>

Answer 2

使用下面的代码 SelectList[i].value 而不是 SelectList[i].val()

 $(function () {
        $('.picker').on('change', function () {     
            var SelectList = $('.picker');
            //Here i'll find how many dropdown are present
            for (var i = 0; i < SelectList.length ; i++) {
                //Here i need to check each dropdown value whether it selected or not
                if (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);
                }
            }
        }); 
    });

Answer 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);
                      
                    }
                  });
              });

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

在这种情况下，当我使用多种输入（如 selection-tag 、input-tag 等）时，在 html 标记内创建一个 SAME 类，然后对其进行处理