Condition with Input field number = checkbox able to select how?-CodePudding

Hi i would like some help where i have created a input field for number 1 - 7 where if number 1 mean i can only select 1 checkbox but if number 7 are choosen is it able to select 7 checkbox how can i do it ?

Here my code

<div >
  <div >
    <input  type="number" 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>

  </div>

</div>

CodePudding user response：

You can use eventListeners to check if the number of checkboxes checked is bigger than the value of the number input :

$("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 >
  <div >
    <input  type="number" 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>

  </div>

</div>