JQuery Checkbox with Textbox Validation
- by Volrath
I am using Jorn's validation plugin. I have a a group of checkboxes beside a group of textboxes. The textboxes are disabled by default and will enable when the matching checkbox is checked.
At least 1 checkbox has to be checked which is not a problem. However, when I check more than 2 checkboxes only 1 textbox validates. The form still submits even when the second checkbox is empty.
$count = 0;
while($row = mysql_fetch_array($rs))
{
?>
<tr>
<td>
<label>
<input type="checkbox" name="tDays[]" id="tDays<?php echo $count; ?>" value="<?php echo $row['promoDayID'];?>" onClick="enableTxt();"
<?php if((isset($arrTDays) && in_array_THours($row['promoDayID'], $arrTDays)) || (!empty($arrSelectedTHours) && in_array_THours($row['promoDayID'], $arrSelectedTHours))) { echo "checked='checked'"; }?> validate="required:true" />
<?php echo $row['promoDay'];?>:
</label>
</td>
<td align="right">
<input type="textbox" size="45" style="font-size:12px" name="tHours[]" id="tHours<?php echo $count; ?>"
<?php if(isset($arrTDays) && in_array_THours($row['promoDayID'], $arrTDays)) { echo "value='" .getHours($row['promoDayID'], $arrTDays) ."'"; } elseif (!empty($arrSelectedTHours) && in_array_THours($row['promoDayID'], $arrSelectedTHours)) { echo "value='" .getHours($row['promoDayID'], $arrSelectedTHours). "'"; } else { echo "value='' disabled='disabled'"; }?> class="required" />
<label for="tHours[]" class="error" id="tHourserror<?php echo $count; ?>">Please enter the Trading Hour.</label>
</td>
</tr>
<?php
$count++; }//while ?>
This is done using javascript:
function enableTxt() {
for (i = 0; i <= 7; i++) {
if (document.getElementById("tDays" + i) != null && document.getElementById("tDays" + i).checked == true) {
document.getElementById('tHours' + i).disabled = false;
document.getElementById('tHourserror' + i).style.visibility = "visible";
} else if (document.getElementById("tDays" + i) != null) {
document.getElementById('tHours' + i).disabled = "disabled";
document.getElementById('tHours' + i).value = "";
document.getElementById('tHourserror' + i).style.visibility = "hidden";
}
}
}
Please kindly advise in detail as to how this problem can be solved. I am fairly weak in JQuery.
