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

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