Originally i have my code to be where if user select 1 - 7 where the user can only select the checkbox based on how much the user can select
Now i would want that if the user click on the checkbox instead Monday it shows 1 on the input where if user select all 7 day the input will be 7 how can i do it now ?
// Checkbox = input choose
$("input[type='checkbox']").change(function() {
let max = $(".weeklyInput").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'].weeklyInput").change(function() {
let max = $(".weeklyInput").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>
<input class="weeklyInput" type="number" name="weekly" value="1" min="1" max="7"><label class="textweekly">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>Looks like this is what you asked for. Try it.
// Checkbox = input choose
$("input[type='checkbox']").change(function() {
let max = $(".weeklyInput").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
$('.weeklyInput').val(cbx);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="weeklyInput" type="number" name="weekly" value="0" min="1" max="7"><label class="textweekly">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>It's a bit difficult to understand what you're asking for, but I think you're saying that your number input determines the maximum number of days the user can check. If that's the case, here's a solution.
https://jsfiddle.net/a4872msr/2/
Wrap your existing inputs, including the weekly number input, in a <form> tag. Then, try this JavaScript:
// Add a single event listener on the outer element
document.querySelector('form').addEventListener('change', (e) => {
// Determine how many inputs are checked
const checkedCount = document.querySelectorAll('form input:not([name="weekly"]):checked').length;
// Loop through each input that isn't the weekly numeric input
for (const inputEl of document.querySelectorAll('form input:not([name="weekly"])')) {
// Is the checked out greater than the max we want? Disable all the elements!
inputEl.disabled = checkedCount >= Number.parseInt(document.querySelector('input[name="weekly"]').value);
}
});