选择多个下拉值时的“启用/禁用"按钮 [英] Enable/Disable Button when multiple dropdown value is selected

问题描述

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

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 so far but my code is not working correctly. Any suggestion?

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

推荐答案

无需循环-当(重新)加载时，我也会触发change onload禁用:

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

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

这篇关于选择多个下拉值时的“启用/禁用"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！