Originalmente tengo mi código para estar donde si el usuario selecciona 1 - 7 donde el usuario solo puede seleccionar la casilla de verificación en función de cuánto puede seleccionar el usuario
Ahora me gustaría que si el usuario hace clic en la casilla de verificación en lugar del lunes, muestre 1 en la entrada, donde si el usuario selecciona los 7 días, la entrada será 7, ¿cómo puedo hacerlo ahora?
// 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>Parece que esto es lo que pediste. Intentalo.
// 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>Es un poco difícil entender lo que está solicitando, pero creo que está diciendo que la entrada de su número determina la cantidad máxima de días que el usuario puede verificar. Si ese es el caso, aquí hay una solución.
https://jsfiddle.net/a4872msr/2/
Envuelva sus entradas existentes, incluida la entrada de número semanal, en una etiqueta <form> . Entonces, prueba este 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); } });