我有一個多行的表。在每一行是一個復選框，選擇和文本區域。如果選中任何復選框，則必須在選擇中選擇一個選項，或者必須在文本區域中輸入資料。
<table>
<tr>
<td scope="row">
<input type="checkbox" id=" chk37179" name=" chk37179">
</td>
<td>B45648</td>
<td>
<select class="form-control reasoncmb" data-id="37179" id="cmb37179" name="cmb37179">
<option value="">-- Select Reason --</option>
<option value="365">Customer Changed their mind</option>
<option value="459">Electrical Fault</option>
<option value="458">Mechcanical Fault</option>
<option value="457">Ordered Wrongly</option>
<option value="363">Part Damaged In Transit</option>
<option value="362">Part Faulty</option>
<option value="364">Sent in Error</option>
<option value="375">Stock Error</option>
<option value="460">Wrong Side</option>
</select>
<textarea id="OtherText_37179" name="OtherText_37179" rows="2" cols="20"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="checkbox" id=" chk379" name=" chk379">
</td>
<td>B45458</td>
<td>
<select class="form-control reasoncmb" data-id="379" id="cmb379" name="cmb379">
<option value="">-- Select Reason --</option>
<option value="365">Customer Changed their mind</option>
<option value="459">Electrical Fault</option>
<option value="458">Mechcanical Fault</option>
<option value="457">Ordered Wrongly</option>
<option value="363">Part Damaged In Transit</option>
<option value="362">Part Faulty</option>
<option value="364">Sent in Error</option>
<option value="375">Stock Error</option>
<option value="460">Wrong Side</option>
</select>
<textarea id="OtherText_379" name="OtherText_379" rows="2" cols="20"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="checkbox" id=" chk179" name=" chk37179">
</td>
<td>B45648</td>
<td>
<select class="form-control reasoncmb" data-id="179" id="cmb179" name="cmb179">
<option value="">-- Select Reason --</option>
<option value="365">Customer Changed their mind</option>
<option value="459">Electrical Fault</option>
<option value="458">Mechcanical Fault</option>
<option value="457">Ordered Wrongly</option>
<option value="363">Part Damaged In Transit</option>
<option value="362">Part Faulty</option>
<option value="364">Sent in Error</option>
<option value="375">Stock Error</option>
<option value="460">Wrong Side</option>
</select>
<textarea id="OtherText_179" name="OtherText_179" rows="2" cols="20"></textarea>
</td>
</tr>
</table>到目前為止，我使用的 Jquery 如下，它只是確保他們在繼續之前至少選擇了一個復選框。
但是如果他們勾選了一個匹配的選擇框或文本框，則希望它有一個值：
$('#prevbut').click(function () {
checked = $("input[type=checkbox]:checked").length;
if (!checked) {
alert("You must select at least one product to");
return false;
}
});
uj5u.com熱心網友回復：
您將不得不遍歷每個復選框并查看與之對應的選擇和文本區域。最簡單的方法是將資料屬性添加到每個選擇和文本區域并選擇它。
$('#prevbut').click(function() {
var needsSelection = $("input[type=checkbox]:checked").filter(function(){
var dataId = $(this).data('id');
return !($('select[data-id="' dataId '"]').val() || $('textarea[data-id="' dataId '"]').val());
}).length;
if (needsSelection) {
alert("You must select at least one product to");
return false;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td scope="row">
<input type="checkbox" id="chk37179" name="chk37179" data-id="37179">
</td>
<td>B45648</td>
<td>
<select class="form-control reasoncmb" data-id="37179" id="cmb37179" name="cmb37179">
<option value="">-- Select Reason --</option>
<option value="365">Customer Changed their mind</option>
<option value="459">Electrical Fault</option>
<option value="458">Mechcanical Fault</option>
<option value="457">Ordered Wrongly</option>
<option value="363">Part Damaged In Transit</option>
<option value="362">Part Faulty</option>
<option value="364">Sent in Error</option>
<option value="375">Stock Error</option>
<option value="460">Wrong Side</option>
</select>
<textarea id="OtherText_37179" name="OtherText_37179" rows="2" cols="20" data-id="37179"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="checkbox" id=" chk179" name=" chk37179" data-id="179">
</td>
<td>B45648</td>
<td>
<select class="form-control reasoncmb" data-id="179" id="cmb179" name="cmb179">
<option value="">-- Select Reason --</option>
<option value="365">Customer Changed their mind</option>
<option value="459">Electrical Fault</option>
<option value="458">Mechcanical Fault</option>
<option value="457">Ordered Wrongly</option>
<option value="363">Part Damaged In Transit</option>
<option value="362">Part Faulty</option>
<option value="364">Sent in Error</option>
<option value="375">Stock Error</option>
<option value="460">Wrong Side</option>
</select>
<textarea id="OtherText_179" name="OtherText_179" rows="2" cols="20" data-id="179"></textarea>
</td>
</tr>
</table>
<button id="prevbut">TEST</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/441319.html
標籤：javascript jQuery 验证