Handling multiple checkbox in jQuery

Question

I have a question form in html. I am handling checkboxes with radio buttons.
Screenshot:
I want it to work like this:

1. If user click on 5 (radio) then first 5 checkboxes should be checked automatically, if user click on 6 (radio) then first 6 checkboxes should be checked auto, same with 7 (radio).

2. If 6 (radio) is selected and first 6 checkboxes are checked auto and user suddenly select 5 (radio) (changed from 6 to 5) then that 6 checkboxes which are 6, should be minus with 1, i mean uncheck 1, and same with 7 (radio).

I've tried with this, but it is checking all checkboxes.

$(".plan_day_5").click(function(){
    $("input[name='day_name_selector']").prop('checked', true);
    if ($("input[name='day_name_selector']:checked").length > 5) {
         $("input[name='day_name_selector']").prop('checked', false);
    }
});

Html code:

<div class="select_package_validity">
    <h5 class="h5-responsive font-weight-bold">1. Select your package validity.</h5>
    <div>
        <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
        <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
    </div>
    <input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>
<div class="select_days">
    <h5 class="h5-responsive font-weight-bold q2_text">2. How many days you need service in a week?</h5>
    <div>
        <input type="radio" class="custom-control-input plan_days plan_day_5" id="5" name="plan_days_selector" value="5">
        <input type="radio" class="custom-control-input plan_days plan_day_6" id="6" name="plan_days_selector" value="6">
        <input type="radio" class="custom-control-input plan_days plan_day_7" id="7" name="plan_days_selector" value="7">
    </div>
    <input type="hidden" name="plan_days" class="form-control selected_plan_days" />
</div>
<div class="days_names">
    <h5 class="h5-responsive font-weight-bold q3_text">3. Select the days.</h5>
    <div>
        <input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
        <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
        <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
        <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
        <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
        <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
        <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
    </div>
    <input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>

My jQuery code:

<script>
    $(document).ready(function() {
        $('.plan_name').click(function(){
            $('.select_days').css('display', 'block');
        });
        $('.plan_days').click(function(){
            $('.days_names').css('display', 'block');
        });
        $("input[name='day_name_selector']").on('change', function (e) {
            var limit = $("input[name='plan_days_selector']:checked").val();
            if ($("input[name='day_name_selector']:checked").length > limit) {
                $(this).prop('checked', false);
            }
        });
        $(".plan_day_5").click(function(){
            $("input[name='day_name_selector']").prop('checked', true);
            if ($("input[name='day_name_selector']:checked").length > 5) {
                $("input[name='day_name_selector']").prop('checked', false);
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("input[name='day_name_selector']").change(function() {
            var final = $('input[name="day_name_selector"]:checked').map(function(){        
                            return $(this).val();
                        }).get();
            $('.selected_days_names').val(final.join(", "));
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("input[name='plan_name_selector']").click(function() {
            var value = $("input[name='plan_name_selector']:checked").val();
            $('.selected_plan_name').val(value);
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("input[name='plan_days_selector']").click(function() {
            var value = $("input[name='plan_days_selector']:checked").val();
            $(".selected_plan_days").val(value);
        });
    });
</script>

I've told you how I want it work, it's like validation or UX (user experience).
Please help me to do this.

Answer 1

you can change the value by iterating the checkboxes using jquery each

this.checked = index < days //(boolean)

$(".plan_days").change(function() {
  let days = this.value;
  $("input[name='day_name_selector']").each(function(index) {
    this.checked = index < days
    //this.disabled = index >= days
  }).trigger('change')
});

$("input[name='day_name_selector']").on('change', function(e) {
  var limit = $("input[name='plan_days_selector']:checked").val();
  if ($("input[name='day_name_selector']:checked").length > limit) {
    $(this).prop('checked', false);
  }
});

$("input[name='day_name_selector']").change(function() {
  var final = $('input[name="day_name_selector"]:checked').map(function() {
    return $(this).val();
  }).get();
  $('.selected_days_names').val(final.join(", "));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select_package_validity">
  <h5 class="h5-responsive font-weight-bold">1. Select your package validity.</h5>
  <div>
    <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
    <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
  </div>
  <input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>
<div class="select_days">
  <h5 class="h5-responsive font-weight-bold q2_text">2. How many days you need service in a week?</h5>
  <div>
    <input type="radio" class="custom-control-input plan_days plan_day_5" id="5" name="plan_days_selector" value="5">
    <input type="radio" class="custom-control-input plan_days plan_day_6" id="6" name="plan_days_selector" value="6">
    <input type="radio" class="custom-control-input plan_days plan_day_7" id="7" name="plan_days_selector" value="7">
  </div>
  <input type="hidden" name="plan_days" class="form-control selected_plan_days" />
</div>
<div class="days_names">
  <h5 class="h5-responsive font-weight-bold q3_text">3. Select the days.</h5>
  <div>
    <input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
    <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
    <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
    <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
    <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
    <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
    <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
  </div>
  <input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>