Develop Reference

enabled submit button if radio button field data and other field data found using jquery

I have few fields on this code snippet. Here I have radio button If Field_One is checked show mentioned input field (country select, first name, last name, mobile, email, trans id) same like if Field_Two is checked show mentioned field (reference no, id no and trans id)
Here Trans ID. First Name, Last Name is mandotory for both radio button and its a required field. But I have added few required field without last name.
And Field_Two radio field will show field like reference id and id no. I want if only one field is required field and if only one field is filled up then its ok from both reference id and id no.
But My code is not working properly See the below snippet
One thing if First Country is Africa then show another Dropdown box with Country2 but its also required when Africa is selected but Africa not selected its not required.
$(document).ready(function () {
function make_required_inputs(el) {
let value = el.val();
let div = $('div.' + value);
$('input[required]').removeAttr('required');
div.find('input.required').attr('required', true);
$('input[name="trxid"]').attr('required', true);
}
function validation() {
let valid = true;
$.each($('input[required]'), function () {
if ($(this).val() == '') valid = false;
});
if (valid) {
jQuery('#button1').attr('disabled', false);
} else {
jQuery('#button1').attr('disabled', true);
}
}
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
$("#country").show();
}
if ($(this).attr("value") == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
$("#country").hide();
}
validation();
});
let checked = $('input[name="myfield"]:checked');
let value_checked = checked.attr("value");
if (value_checked == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
}else if (value_checked == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
}
$('input[type="radio"]')
make_required_inputs($('input[name="myfield"]:checked'));
$('input[name="myfield"]').on('change', function () {
make_required_inputs($(this));
validation();
});
$('input').keyup(function (e) {
validation();
});
jQuery("#country").change(function(){
jQuery(this).find("option:selected").each(function(){
var optionValue = jQuery(this).attr("value");
if(optionValue=='za'){
jQuery("#country2").show();
} else{
jQuery("#country2").hide();
}
});
}).change();
jQuery("#country2").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<br><br>
<select name="country" class="required" id="country">
<option>Select</option>
<option value="us">US</option>
<option value="uk">UK</option>
<option value="za">Africa</option>
</select>
<br><br>
<select name="country2" class="required" id="country2">
<option>Select</option>
<option value="eg">Egypt</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="za">South Africa</option>
</select>
<br><br>
<input type="text" name="first_name" class="required" placeholder="First Name" />
<br><br>
<input type="text" name="last_name" placeholder="Last Name"/>
<br><br>
<div class="Field_One">
<input type="text" name="mobile_no" placeholder="Mobile no"/>
<br><br>
<input type="text" class="required" name="email" placeholder="Email"/>
</div>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" class="required" placeholder="Reference no" /><br><br>
<input type="text" name="id_no" class="required" placeholder="ID no" />
</div><br>
<input type="text" name="trxid" class="required" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled/>

Update:
$(document).ready(function () {
function validation() {
let valid = true;
$.each($('input[required]:not([name="reference_no"],[name="id_no"]),select[required]'), function () {
if ($(this).val() == '') valid = false;
});
let one = 0;
if ($('input[one="true"][required]').length == 0) {
one = 1;
} else {
one = 0;
$.each($('input[one="true"][required]'), function () {
if ($(this).val() !== '') one++;
});
}
if (valid && one > 0) {
jQuery('#button1').prop('disabled', false);
} else {
jQuery('#button1').prop('disabled', true);
}
}
function required(value) {
$('input.required,select.required').prop('required', true);
if (value == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide().find('input,select').prop('required', false);
$("#country").show().addClass('required').prop('required', true);
}
if (value == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide().find('input,select').prop('required', false);
$("#country").hide().removeClass('required').prop('required', false);
jQuery("#country2").hide().removeClass('required').prop('required', false);
}
validation();
}
$('input[type="radio"]').click(function () {
required($(this).val());
});
let value_checked = $('input[name="myfield"]:checked').attr("value");
required(value_checked);
$('select,input').on('change keyup', function () {
validation();
});
jQuery("#country").change(function () {
var optionValue = jQuery(this).find("option:selected").attr("value");
if (optionValue == 'za') {
jQuery("#country2").show().addClass('required').prop('required', true);;
} else {
jQuery("#country2").hide().removeClass('required').prop('required', false);;
}
validation();
}).change();
jQuery("#country2").hide().removeClass('required').prop('required', false);
});
let valid2 = true;
$.each($('#domain_name,select[required]'), function () { if ($(this).val() == '') valid2 = false; }); if (valid2) { jQuery('#domsBtn').prop('disabled', false); } else { jQuery('#domsBtn').prop('disabled', true); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<br><br>
<select name="country" class="required" id="country">
<option value="">Select</option>
<option value="us">US</option>
<option value="uk">UK</option>
<option value="za">Africa</option>
</select>
<select name="country2" class="required" id="country2">
<option value="">Select</option>
<option value="eg">Egypt</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="za">South Africa</option>
</select>
<br><br>
<input type="text" name="first_name" class="required" placeholder="First Name" />
<br><br>
<input type="submit" id="firstCheck" value="First Name Check" disabled />
<br><br>
<input type="text" name="last_name" placeholder="Last Name" />
<br><br>
<div class="Field_One">
<input type="text" name="mobile_no" placeholder="Mobile no" />
<br><br>
<input type="text" class="required" name="email" placeholder="Email" />
</div>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" one="true" class="required" placeholder="Reference no" /><br><br>
<input type="text" name="id_no" one="true" class="required" placeholder="ID no" />
</div><br>
<input type="text" name="trxid" class="required" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled />

How to change text based upon select id and radio name

I am bit lost over here.
I am trying to change the content of the id #total to "not eligible", if the user selects option in "countries" where the "data-class" is "false" and selects the radio "value" to "business". So if select is False and radio is business then change the #total to not eligible.
$(document).ready(function() {
$('.countries').change(function() {
var self = $(this).find('option:selected')
$('input:radio[name="service"]').change(
function() {
if ($(this).val() == 'Business' && self.attr("data-class") == 'False') {
return $('#total').text('Not Eligible')
}
}
).change()
}).change()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
<option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
<option value="USA" data-class="True" data-tx_1="65">USA</option>
<option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>
<br><br>
<label for="id_service_0"><input type="radio" name="service" value="Economy" required id="id_service_0" />Economy</label>
<label for="id_service_1"><input type="radio" name="service" value="Business" required id="id_service_1" />Business</label>
<label for="id_service_2"><input type="radio" name="service" value="First" required id="id_service_2" />First</label>
<p>Total Price is <span id="total"></span></p>

I believe your code is indeed working. The reason you thinks it is not might be that you're not resetting the label text. See my snippet below. I've just added an "else" condition to your inner if statement.
$(document).ready(function() {
$('.countries').change(function() {
var self = $(this).find('option:selected')
$('input:radio[name="service"]').change(
function() {
if ($(this).val() == 'Business' && self.attr("data-class") == 'False') {
$('#total').text('Not Eligible')
}
else{
$('#total').text('Eligible')
}
}
).change()
}).change()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
<option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
<option value="USA" data-class="True" data-tx_1="65">USA</option>
<option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>
<input type="radio" name="service" value="Economy" required id="id_service_0" />
<input type="radio" name="service" value="Business" required id="id_service_1" />
<input type="radio" name="service" value="First" required id="id_service_2" />
<p>Total Price is <span id="total"></span></p>

Have 2 separate change event
Check for value and compare
$(document).ready(function() {
$('.countries').change(function() {
var self = $(this).find('option:selected');
var inputvalue = $('input:radio[name="service"]:checked').val();
if (inputvalue == 'Business' && self.attr("data-class") == 'False') {
$('#total').text('Not Eligible')
} else {
$('#total').text('Eligible')
}
}).change()
$('input:radio[name="service"]').change(function() {
var self = $('.countries').find('option:selected');
var inputvalue = $('input:radio[name="service"]:checked').val();
if (inputvalue == 'Business' && self.attr("data-class") == 'False') {
$('#total').text('Not Eligible')
} else {
$('#total').text('Eligible')
}
}).change()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
<option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
<option value="USA" data-class="True" data-tx_1="65">USA</option>
<option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>
<input type="radio" name="service" value="Economy" required id="id_service_0" />Economy
<input type="radio" name="service" value="Business" required id="id_service_1" />Business
<input type="radio" name="service" value="First" required id="id_service_2" />First
<p>Total Price is <span id="total"></span></p>

Prefill form fields with JSON url data

I just tried to (pre-)fill some form fields with JSON data, but it doesn't work.
This are my script and my form fields:
$(document).on('change', '#wf_id', function() {
$.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(),
function(data) {
$.each(data.results[0], function(i, item) {
if (item == "name_and_origin") {
$("#wf_name_and_origin").val(item);
} else if (item == "ueln") {
$("#wf_ueln").val(item);
} else if (item == "date_of_birth") {
$("#datepicker_15").val(item);
} else if (item == "color_code") {
$("#wf_color_code").val(item);
} else if (item == "color") {
$("#wf_color").val(item);
} else if (item == "country_located") {
$("#wf_country_located").val(item);
} else if (item == "fate") {
$("#wf_fate").val(item);
} else if (item == "microchip") {
$("#wf_microchip").val(item);
} else if (item.father == "id") {
$("#wf_father_id").val(item);
} else if (item.father == "name_and_origin") {
$("#wf_father_name_and_origin").val(item);
} else if (item.mother == "id") {
$("#wf_mother_id").val(item);
} else if (item.mother == "name_and_origin") {
$("#wf_mother_name_and_origin").val(item);
}
});
});
});
<input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
<input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
<select name="fields[25]" id="gender" size="1">
<option value="0" selected="selected">Bitte auswählen…</option>
<option value="1">Stute</option>
<option value="2">Hengst</option>
<option value="3">Wallach</option>
<option value="4">Geschl. unbekannt</option>
</select>
<input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
<input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
<input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
<input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
<input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
<input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
<input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
<input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
<input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
<input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
<input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />
The data from apis.is are like this:
{
"results":[
{
"id":"IS1987187700",
"name_and_origin":"Oddur frá Selfossi",
"ueln":"352002987187700",
"date_of_birth":"15.06.1987",
"color_code":"4521",
"color":"Palomino with a star flaxen mane and tail",
"country_located":"IS",
"fate":"Put down",
"microchip":null,
"father":{
"id":"IS1981157025",
"name_and_origin":"Kjarval frá Sauðárkróki"
},
"mother":{
"id":"IS1972287521",
"name_and_origin":"Leira frá Þingdal"
}
}
]
}
If I fill in a new value in wf_id the script seems to do "something" (think about asking apis.is...) but nothing I would like it else to do... ;)
I have no knowledge about debugging, so it is not easy to find out what's going wrong with this.

You need to understand what your KEYS and VALUES are.
I commented out the onChange on XHR call logic to just simply iterate over your provided data.
Edit
I created a second example below using a field mapping loop and function for extensibility and reusability.
var data = {
"results": [{
"id": "IS1987187700",
"name_and_origin": "Oddur frá Selfossi",
"ueln": "352002987187700",
"date_of_birth": "15.06.1987",
"color_code": "4521",
"color": "Palomino with a star flaxen mane and tail",
"country_located": "IS",
"fate": "Put down",
"microchip": null,
"father": {
"id": "IS1981157025",
"name_and_origin": "Kjarval frá Sauðárkróki"
},
"mother": {
"id": "IS1972287521",
"name_and_origin": "Leira frá Þingdal"
}
}]
};
//$(document).on('change', '#wf_id', function() {
// $.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(), function(data) {
$.each(data.results[0], function(key, value) {
if (key === "name_and_origin") {
$("#wf_name_and_origin").val(value);
} else if (key === "ueln") {
$("#wf_ueln").val(value);
} else if (key === "date_of_birth") {
$("#datepicker_15").val(value);
} else if (key === "color_code") {
$("#wf_color_code").val(value);
} else if (key === "color") {
$("#wf_color").val(value);
} else if (key === "country_located") {
$("#wf_country_located").val(value);
} else if (key === "fate") {
$("#wf_fate").val(value);
} else if (key === "microchip") {
$("#wf_microchip").val(value);
} else if (key.father === "id") {
$("#wf_father_id").val(value);
} else if (key.father === "name_and_origin") {
$("#wf_father_name_and_origin").val(value);
} else if (key.mother === "id") {
$("#wf_mother_id").val(value);
} else if (key.mother === "name_and_origin") {
$("#wf_mother_name_and_origin").val(value);
}
});
// });
//});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
<input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
<select name="fields[25]" id="gender" size="1">
<option value="0" selected="selected">Bitte auswählen…</option>
<option value="1">Stute</option>
<option value="2">Hengst</option>
<option value="3">Wallach</option>
<option value="4">Geschl. unbekannt</option>
</select>
<input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
<input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
<input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
<input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
<input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
<input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
<input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
<input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
<input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
<input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
<input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />
</form>
Version 2
You can create a mapping of keys to field ids. This way you can loop over any field.
var data = {
"results": [{
"id": "IS1987187700",
"name_and_origin": "Oddur frá Selfossi",
"ueln": "352002987187700",
"date_of_birth": "15.06.1987",
"color_code": "4521",
"color": "Palomino with a star flaxen mane and tail",
"country_located": "IS",
"fate": "Put down",
"microchip": null,
"father": {
"id": "IS1981157025",
"name_and_origin": "Kjarval frá Sauðárkróki"
},
"mother": {
"id": "IS1972287521",
"name_and_origin": "Leira frá Þingdal"
}
}]
};
// Map object keys to fields.
var keyToFieldMap = {
"name_and_origin" : "#wf_name_and_origin",
"ueln" : "#wf_ueln",
"date_of_birth" : "#datepicker_15",
"color_code" : "#wf_color_code",
"color" : "#wf_color",
"country_located" : "#wf_country_located",
"fate" : "#wf_fate",
"microchip" : "#wf_microchip",
"father" : {
"id" : "#wf_father_id",
"name_and_origin" : "#wf_father_name_and_origin"
},
"mother" : {
"id" : "#wf_mother_id",
"name_and_origin" : "#wf_mother_name_and_origin"
}
};
function isObject(val) {
if (val === null) { return false; }
return ((typeof val === 'function') || (typeof val === 'object'));
}
function populateFormFromData(data, mapping) {
$.each(data, function(key, value) {
var field = keyToFieldMap[key];
if (isObject(field)) {
$.each(value, function(subKey, subValue) {
$(field[subKey]).val(subValue);
});
} else {
$(field).val(value);
}
});
}
//$(document).on('change', '#wf_id', function() {
// $.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(), function(data) {
populateFormFromData(data.results[0], keyToFieldMap);
// });
//});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
<input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
<select name="fields[25]" id="gender" size="1">
<option value="0" selected="selected">Bitte auswählen…</option>
<option value="1">Stute</option>
<option value="2">Hengst</option>
<option value="3">Wallach</option>
<option value="4">Geschl. unbekannt</option>
</select>
<input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
<input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
<input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
<input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
<input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
<input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
<input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
<input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
<input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
<input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
<input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />
</form>

How do I enable my form's submit button using jquery?

I have a basic form with some input fields and a dropdown(select field).
Almost all fields have a form of validation. When a field has an error, an error message with the CSS class 'errorText' is displayed next to the field.
By default, my submit button is 'disabled'. I want to remove the 'disabled' attribute from my submit button once all tags with 'errorText' CSS classes are hidden/removed.
my current script just hides all tags with 'errorText' when an error occurs. how do I stop it from doing that and how can I enable my submit button once all fields have been properly enter/validated? Thanks.
EDIT: SOLVED. CODE UPDATED.
// Field Validations
$('#firstName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="firstName"]').addClass('errorText');
$('#errorFName').show();
} else {
$('label[for="firstName"]').removeClass('errorText');
$('#errorFName').hide();
}
});
$('#lastName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="lastName"]').addClass('errorText');
$('#errorLName').show();
} else {
$('label[for="lastName"]').removeClass('errorText');
$('#errorLName').hide();
}
});
$('#state')
.on('blur', function() {
var $this = $(this);
if ($('#state').val() == "") {
$('label[for="state"]').addClass('errorText');
$('#errorState').show();
} else {
$('label[for="state"]').removeClass('errorText');
$('#errorState').hide();
}
});
// Submit Button validation
$('input, select').on('keyup, blur', function() {
if ($('.errorText:visible').length ||
$('#firstName' || '#lastName' || '#state').val() == '' ) {
$('input[type="submit"]').prop('disabled', true);
} else if ($('#firstName').val() != '' &&
$('#lastName').val() != '' &&
$('#state').val() != '' ) {
$('input[type="submit"]').prop('disabled', false);
}
});
.errorText {
color: #c4161c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>
<label for="firstName" class="required">First Name</label>
</div>
<div>
<input type="text" name="firstName" id="firstName" />
</div>
<div class="errorText" id="errorFName" style="display:none;">Please enter a First Name</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
</div>
<div>
<input type="text" name="lastName" id="lastName" />
</div>
<div class="errorText" id="errorLName" style="display:none;">Please enter a Last Name</div>
<br />
<div>
<label for="state" class="required">State</label>
</div>
<div>
<select name="state" id="state">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
</div>
<div class="errorText" id="errorState" style="display:none;">Please select a State</div>
<br />
<input type="submit" class="LargeButton" value="Submit Referral" disabled />

If it helps, check this update using data-attribute. We group the label,input,error in a div and handle error message. Also simplified the check valid on input and select element but can be modified.
html
<div>
<label for="firstName" class="required">First Name</label>
<input type="text" name="firstName" id="firstName" />
<span class="errorText" style="display:none;">Please enter a First Name</span>
</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<span class="errorText" style="display:none;">Please enter a Last Name</span>
</div>
<br />
<div>
<label for="state" class="required">State</label>
<select name="state" id="state" data-valid="">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
<span class="errorText" style="display:none;">Please select a State</span>
</div>
<br />
<input type="submit" id="submit" class="LargeButton" value="Submit Referral" disabled />
script
$(function() {
$('input,select')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$this.data("valid", 'false');
//find the immediate span with errorText and show it
$this.next("span.errorText").show();
} else {
$this.data("valid", 'true');
$this.next("span.errorText").hide();
}
checkInputs();
});
});
function checkInputs() {
//find all the input and select items where the data attribute valid is present and make an array
var array = $('input,select').map(function() {
return $(this).data("valid");
}).get();
//if there are not empty or false indicating invalid value set submit property to true
if (array.indexOf("") == -1 && array.indexOf("false") == -1) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
}
css
.errorText {
color: #c4161c;
display: block;
}

jquery validation to check status of 3 checkboxes are all checked then enable button

I have a form with some text fields, three checkboxes and a submit button.
Currently I have the submit button disabled and it should enable only if ALL three checkboxes are checked.
I have only been able to work out how to enable it with only one checkbox being checked.
How can I make sure all three are checked before enabling the button?
End of form
<input name="list1" id="list1" type="checkbox" value="" >
<input name="list2" id="list2" type="checkbox" value="" >
<input name="list3" id="list3" type="checkbox" value="" >
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">
Script
<script type="text/javascript">
$(function() {
$('#list1').click(function() {
if ($(this).is(':checked')) {
$('#pay-button').removeAttr('disabled');
} else {
$('#pay-button').attr('disabled', 'disabled');
}
});
});
</script>

Try
$(function () {
var $checks = $('#list1, #list2, #list3').change(function () {
$('#pay-button').prop('disabled', $checks.is(':not(:checked)'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="list1" id="list1" type="checkbox" value="" >
<input name="list2" id="list2" type="checkbox" value="" >
<input name="list3" id="list3" type="checkbox" value="" >
<input id="pay-button" type="image" disabled="disabled" src="//placehold.it/32/fff000" value="" name="save">
you can simplify the selector #list1, #list2, #list3 by adding a common class to those elements and then by using a class selector

You could try to compare the count of checked checkboxes and the total amount:
<div id="wrapper">
<input name="list1" id="list1" type="checkbox" value="" >
<input name="list2" id="list2" type="checkbox" value="" >
<input name="list3" id="list3" type="checkbox" value="" >
</div>
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">
Script
<script type="text/javascript">
$(function() {
$('#wrapper').on('click', 'input[type="checkbox"]', function() {
if ($('#wrapper').find(':checked').size() === $('#wrapper').find(':checkbox').size()) {
$('#pay-button').removeAttr('disabled');
} else {
$('#pay-button').attr('disabled', 'disabled');
}
});
});
</script>

edit code like below and try again:
HTML :
<input class="chck" name="list1" id="list1" type="checkbox" value="" >
<input class="chck" name="list2" id="list2" type="checkbox" value="" >
<input class="chck" name="list3" id="list3" type="checkbox" value="" >
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">
JS :
<script type="text/javascript">
$(function() {
$('.chck').click(function() {
var isAllChecked = true;
for(var i = 0; i < $('.chck').length; i++)
{
if(!$('.chck')[i].is(':checked'))
isAllChecked = false;
}
if (isAllChecked) {
$('#pay-button').removeAttr('disabled');
} else {
$('#pay-button').attr('disabled', 'disabled');
}
});
});
</script>

Add a class name to your checkboxes i.e .checkboxes
$(".checkboxes").click(function () {
var blnEnableBtn = false;
var count = 0;
$('input:checked').each(function (index, element) {
count++;
});
if (count == 3)
$("#pay-button").removeAttr('disabled');
else
$("#pay-button").attr('disabled', 'disabled');
});
Hope it helps .