我有一個教育管理系統。我想申請一個條件如果選擇一月然后檢查二月。沒有選擇一月，任何機構都無法選擇二月。
如果有人選擇一月、二月、三月。然后取消選中一月。自動取消選中二月和三月。
這是我的 html 代碼。我如何在這里應用 jquery 或 javascript。
<table>
<tbody>
<tr>
<th>January</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall1" onclick="selectAll1(this,'color1')">
</td>
<td>7000</td>
</tr>
<tr>
<th>February</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall2" onclick="selectAll2(this,'color2')">
</td>
<td>800</td>
</tr>
<tr>
<th>March</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall3" onclick="selectAll3(this,'color3')">
</td>
<td>800</td>
</tr>
<tr>
<th>April</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall4" onclick="selectAll4(this,'color4')">
</td>
<td>800</td>
</tr>
<tr>
<th>May</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall5" onclick="selectAll5(this,'color5')">
</td>
<td>800</td>
</tr>
<tr>
<th>June</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall6" onclick="selectAll6(this,'color6')">
</td>
<td>800</td>
</tr>
<tr>
<th>July</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall7" onclick="selectAll7(this,'color7')">
</td>
<td>800</td>
</tr>
<tr>
<th>August</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall8" onclick="selectAll8(this,'color8')">
</td>
<td>800</td>
</tr>
<tr>
<th>September</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall9" onclick="selectAll9(this,'color9')">
</td>
<td>800</td>
</tr>
<tr>
<th>October</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall10" onclick="selectAll10(this,'color10')">
</td>
<td>800</td>
</tr>
<tr>
<th>November</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall11" onclick="selectAll11(this,'color11')">
</td>
<td>800</td>
</tr>
<tr>
<th>December</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall12" onclick="selectAll12(this,'color12')">
</td>
<td>800</td>
</tr>
<tr class="info">
<th>Grand Total</th>
<td></td>
<th>15800</th>
</tr>
</tbody>
</table>uj5u.com熱心網友回復：
有趣的挑戰
這在我理解規格時起作用
const $months = $("[data-color]");
$months.on("click", function() {
const idx = $months.index(this)
if (this.checked && idx > 0) { // only check from Feb onwards
const checked = $("[data-color]:lt(" idx ")").map(function() { return this.checked }).get()
this.checked = checked.every(c => c); // only allow checking if previous are checked
} else $("[data-color]:gt(" idx ")").prop("checked", false)
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>January</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall1" data-color="color1">
</td>
<td>7000</td>
</tr>
<tr>
<th>February</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall2" data-color="color2">
</td>
<td>800</td>
</tr>
<tr>
<th>March</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall3" data-color="color3">
</td>
<td>800</td>
</tr>
<tr>
<th>April</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall4" data-color="color4">
</td>
<td>800</td>
</tr>
<tr>
<th>May</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall5" data-color="color5">
</td>
<td>800</td>
</tr>
<tr>
<th>June</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall6" data-color="color6">
</td>
<td>800</td>
</tr>
<tr>
<th>July</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall7" data-color="color7">
</td>
<td>800</td>
</tr>
<tr>
<th>August</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall8" data-color="color8">
</td>
<td>800</td>
</tr>
<tr>
<th>September</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall9" data-color="color9">
</td>
<td>800</td>
</tr>
<tr>
<th>October</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall10" data-color="color10">
</td>
<td>800</td>
</tr>
<tr>
<th>November</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall11" data-color="color11">
</td>
<td>800</td>
</tr>
<tr>
<th>December</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall12" data-color="color12">
</td>
<td>800</td>
</tr>
<tr class="info">
<th>Grand Total</th>
<td></td>
<th>15800</th>
</tr>
</tbody>
</table>uj5u.com熱心網友回復：
您可以使用輔助函式來確定每次有人嘗試切換復選框時。你的條件集會去那里，如果是真的，讓他們切換，否則不要。
您可以生成一個帶有月份名稱和月份數的物件。
{ "JANUARY": 0, ..., "JULY": 6, ..., "DECEMBER": 11 }
通過這種方式，您只需在決定是否允許對特定復選框使用 toggleRequest 之前跟蹤行數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400028.html
標籤：javascript 查询