Select checkbox = to the number of input?-CodePudding

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  type="number" name="weekly" value="1" min="1" max="7"><label >times per week</label>
<div >
  <div >
    <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>

CodePudding user response：

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  type="number" name="weekly" value="0" min="1" max="7"><label >times per week</label>
<div >
  <div >
    <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>

CodePudding user response：

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);
  }

});