我正在尝试将checkbox与checked与keyup函数结合使用，以便在写入required字段时提供信息。
我几乎做到了，问题在于，如果两个条件都为true（字段不为空，并且选中了复选框），则submit仅在class函数时才更改keyup被激活。因此，如果我编写字段并进行下一步检查，则checkbox无效，因为最后一件事是检查。如果我先选中复选框，然后再填写inputs，则工作正常，因为最后一件事是keyup。我尝试使用keyup和change，但是这对我不起作用，因为它不适合更改，如果仅复选框为：checked。您可以看到实时here。必需输入的是“ nota media”，“ titular”和复选框。
$('input').on('keyup', function() {
var fields = $(".ss-item-required").find("select, textarea, input").serializeArray();
$.each(fields, function(i, field) {
if ((!field.value) && ($("#customCheck1").is(':checked'))) {
alert(field.name + ' is required');
} else {
$('.btn-inscripcion').removeClass( "disabled" );
}
});
});
HTML：
<form id="form-inscripciones" style="width: 100%;">
<div class="form-group-row align-items-center">
<div class="container" style="max-width: 600px;">
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Nombre</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Nombre</div>
</div>
<input type="text" class="form-control form-control-lg" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Apellidos</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Apellidos</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">NIF</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">NIF</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Fecha de nacimiento</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Fecha de nacimiento</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Domicilio</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Domicilio</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">CP</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">CP</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Localidad</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Localidad</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Provincia</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Provincia</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Teléfono solicitante</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Teléfono solicitante</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">E-mail</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">E-mail</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Curso que estudia</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Curso que estudia</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Facultad o escuela</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Facultad o escuela</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Titulación</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Titulación</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto ss-item-required">
<label class="sr-only" for="inlineFormInputGroup">Nota media</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Nota media</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" required>
</div>
</div>
</div>
</div>
<div class="header-section small-header bg-left rosa">
<div style="max-width: calc(34em + 5vw);">
<h1>DATOS <br> PADRE Y MADRE</h1>
</div>
</div>
<div class="container" style="max-width: 600px;">
<div class="form-group-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Nombre padre / Tutor</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Nombre padre / Tutor</div>
</div>
<input type="text" class="form-control form-control-lg" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Nombre madre / Tutora</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Nombre madre / Tutora</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Profesión padre / Tutor</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Profesión padre / Tutor</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Profesión madre / Tutora</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Profesión madre / Tutora</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Teléfono de contacto</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Teléfono de contacto</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
</div>
</div>
<div class="header-section small-header bg-left rosa">
<div style="max-width: calc(34em + 5vw);">
<h1>DATOS BANCARIOS</h1>
</div>
</div>
<div class="container" style="max-width: 900px;">
<div class="form-group-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">IBAN</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">IBAN</div>
</div>
<input type="text" class="form-control form-control-lg" id="inlineFormInputGroup">
</div>
</div>
<div class="col-auto ss-item-required">
<label class="sr-only" for="inlineFormInputGroup">Titular</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">Titular</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" required>
</div>
</div>
<div class="mx-auto form-inscripcion-end-group ss-item-required">
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" name="normas" id="customCheck1" required>
<label class="custom-control-label" for="customCheck1">He leído y acepto las <a href="#" data-toggle="modal" data-target="#exampleModalCenter">condiciones</a></label>
</div>
<button type="submit" id="confirm" class="btn-inscripcion disabled">Enviar formulario</button>
</div>
</div>
</div>
</form>
答案 0 :(得分：2)
使用标志...您必须让循环完全执行。如果在循环过程中发现不正确的内容，则使用该标志保留该信息。
这次我仔细检查了your website ...并测试了我的解决方案。
此行绝对是错误的：
var fields = $(".ss-item-required")
.find("select, textarea, input").serializeArray();
因为.find()方法仅返回 last .ss-item-required元素中的元素。所以您没有检查所有必填字段...
我将其更改为：
var fields = $("select, textarea, input",".ss-item-required");
它获取select, textarea, input上下文中的所有.ss-item-required。因此，您现在真正拥有了所有必需的元素。
然后... input并不都具有name属性...这是一个问题，因为它用在alert()中...并且可能是提交form时出现问题。
现在...为了拥有相关的alert()文字，我改用了相关标签的文字...
$('input').on('change', function() {
// Get the collection of all required fields
var fields = $("select, textarea, input",".ss-item-required");
// Flag
var okToEnable = true;
fields.each(function(i, field) {
if ( field.type == "text" && field.value=="" ) {
// Get the label's text
var label_text = $(field).prev("div").find(".input-group-text").text();
alert(label_text + ' is required');
// if incorrect at least once, turn the flag to false
okToEnable = false;
// Exit the each loop to avoid alerting more than once
return false;
}
if ( field.type == "checkbox" && !field.checked ) {
// Get the label's text
var label_text = $(field).next("label").text();
alert(label_text + ' is required');
// if incorrect at least once, turn the flag to false
okToEnable = false;
// Exit the each loop to avoid alerting more than once
return false;
}
});
// After the loop, act based on the flag
if(okToEnable && $("#customCheck1").is(':checked')){
$('.btn-inscripcion').removeClass( "disabled" );
}
});