条件与输入字段编号=复选框可以选择如何

Question

嗨，我想要一些帮助，我为数字1-7创建了一个输入字段，如果数字1意味着我只能选择1个复选框，但如果选择了数字7，它能选择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(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) { 
$(this).prop("checked", false); //cancels the check
}
});
$("input[type='number'].inputStyle").change(function(){
let max = $(".inputStyle").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) {
$("input[type='checkbox']:checked").prop("checked", false); //uncheck all checked checkboxes
}
});

<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>