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();
});
<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>
Solution 2:
Use below code SelectList[i].value instead of 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);
}
}
});
});
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);
}
});
});
<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>
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
Post a Comment for "Enable/Disable Button When Multiple Dropdown Value Is Selected"