I have a form with several checkboxes and corresponding input fields.
<div class="group-wrap input-element" id="gr_">
<div class="label-bar">
<label>
<div class="custom-control form-check">
<input class="form-check-input" value="1" type="checkbox" id="Gleitzeitmaxstundenenable" name="Gleitzeitmaxstundenenable" onmouseup="{setActFeld(this.id);}" onfocus="{ setActFeld(this.id);}" onclick="{setConfirmedChange(this.id, "false") ; initCheckBox(this.id);transaktionObj.inputEnable(this.checked,"Gleitzeitmaxstunden");}">
<label class="form-check-label" for="Gleitzeitmaxstundenenable">Gleitzeit max.</label>
</div>
</label>
</div>
<input placeholder="Gleitzeitmaxstunden" name="Gleitzeitmaxstunden" class="form-control text-truncate input-sm zeit-raum withSign numValPicker timecount disabled" data-syntax="-NNN:NN" value="" data-prefix="true" id="Gleitzeitmaxstunden" maxlength="7" type="text" onmousedown="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onkeyup="{ if(checkPicker(this.id)){ return false;} else{return (updateZeitMitSign(this,4, true));}}" onfocus="{ setActFeld(this.id);}" onkeydown="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onmouseup="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onkeypress="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onchange="{ if(checkPickerVoll(this.id)){setConfirmedChange(this.id, "false"); return false;}else{setConfirmedChange(this.id, "false");}}" onblur="{ if(checkPickerVoll(this.id)){ return false;}else{scanValueAufHtml(this.id);convertZeitGt23(this.id,this.value,3,999);}}" onclick="{ if(checkPickerVoll(this.id)){ return false;}else{openNumpadV3("toggle§Gleitzeitmaxstunden", event);return (updateZeitMitSign(this,4, false));}}"
></div>
</div>
When a checkbox is checked and the user enters a value in the corresponding input field then the TS
method should return true
.
let fehler = false;
$JQ("input.form-check-input").each(function(ind: number, checkBox: Element){
const checkbox = $JQ(checkBox);
const inputId = checkbox.attr("id").replace("enable", "");
if($JQ(`#${inputId}`).val() !== ""){
fehler = true;
}
});
return fehler;
But $JQ(
#${inputId}).val() !== ""
always gives true
. Kindly, help me.
2
Answers
in js you should check the
checked
attribute rather thanvalue
for checkbox inputsSo would be
in jquery think would be like
If a checkbox is changed set the
required
property on the input element to true or false.The form will only submit if all required form fields are valid — in this example — has any value. You can require something more specific by using attributes like
pattern
,minlength
ormaxlength
for text input (<input type="text">
).