輸入字段編號 = 復選框的條件能夠 select 如何？

Question

嗨，我需要一些幫助，我已經為數字 1 - 7 創建了一個輸入字段，如果數字 1 意味着我只能 select 1 復選框，但如果選擇數字 7 是否能夠 select 7 復選框，我該怎么做？

這是我的代碼

 <div class="container position"> <div class="row"> <input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label> <div class="container-fluid"> <div class="box"> <input type="checkbox" id="monday" name="monday" value="Monday"> <label for="monday"> Monday</label><br> <input type="checkbox" id="tuesday" name="tuesday" value="Tuesday"> <label for="tuesday"> Tuesday</label><br> <input type="checkbox" id="wednesday" name="wednesday" value="Wednesday"> <label for="wednesday"> Wednesday</label><br> <input type="checkbox" id="thursday" name="thursday" value="Thursday"> <label for="thursday"> Thursday</label><br> <input type="checkbox" id="friday" name="friday" value="Friday"> <label for="Friday"> Friday</label><br> <input type="checkbox" id="saturday" name="saturday" value="Saturday"> <label for="saturday"> Saturday</label><br> <input type="checkbox" id="sunday" name="sunday" value="Sunday"> <label for="Sunday"> Sunday</label><br> </div> </div> </div> </div>

Answer 1

您可以使用eventListeners檢查選中的復選框數量是否大於輸入的數字值：

 $("input[type='checkbox']").change(function(){ let max = $(".inputStyle").val(); let cbx = $("input[type='checkbox']:checked").length; if (cbx > max) $(this).prop("checked", false); }); $("input[type='number'].inputStyle").change(function(){ let max = $(".inputStyle").val(); let cbx = $("input[type='checkbox']:checked").length; if (cbx > max) $("input[type='checkbox']:checked").prop("checked", false); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container position"> <div class="row"> <input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label> <div class="container-fluid"> <div class="box"> <input type="checkbox" id="monday" name="monday" value="Monday"> <label for="monday"> Monday</label><br> <input type="checkbox" id="tuesday" name="tuesday" value="Tuesday"> <label for="tuesday"> Tuesday</label><br> <input type="checkbox" id="wednesday" name="wednesday" value="Wednesday"> <label for="wednesday"> Wednesday</label><br> <input type="checkbox" id="thursday" name="thursday" value="Thursday"> <label for="thursday"> Thursday</label><br> <input type="checkbox" id="friday" name="friday" value="Friday"> <label for="Friday"> Friday</label><br> <input type="checkbox" id="saturday" name="saturday" value="Saturday"> <label for="saturday"> Saturday</label><br> <input type="checkbox" id="sunday" name="sunday" value="Sunday"> <label for="Sunday"> Sunday</label><br> </div> </div> </div> </div>