Amar Amar - 7 months ago 241
Javascript Question

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




Answer

Two bugs in your code

  1. SelectList\[i\] is a dom object, so you can't use val() use value or SelectList.eq(i).val()
  2. Setting disable property true means it disables the element not enables the element.
  3. Also fire change event initially to disable button using change() or just set disabled attribute to button.

$(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", false);
      } else {
        //Disable button if any dropdown is not selected
        $("#Testing").attr("disabled", true);
      }
    }
  }).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>

Comments