jQuery calculate amount of days and hide checkboxes

Question

I have a duration of for example 3 days, and 7 checkboxes that represent each day in a week. I want to be able to check one day, and then hide the next 2 days (3 days total).

If we consider a duration of 3 days: I check Monday, then tuesday & wednesday will be hidden. I can then check thursday, then friday & saturday will be hidden:

I wrote the following that partially works:

var toHide = new Array(0,0,0,0,0,0,0,0);
$('.days').change(function() {
 var val = $(this).val();
 var duration = $('#duration').val();
 if($('#check'+val).prop('checked')) {
    scheduleSelection(val,duration,'on');
 }else{
    scheduleSelection(val,duration,'off');
 }
});

function scheduleSelection(id,duration,mode) {
 var totalDays = duration;
 if(totalDays>1) {
  totalDays--;
    var next = parseInt(id)+1;
    for(i=1;i<=totalDays;i++) {
        if(next>7) { next = 1; }
        if(mode=='on') {
            toHide[next] = 1;
            $('#check'+next).hide();
        }else{
            toHide[next] = 0;
            $('#check'+next).show();
        }
        next++;
    }
 }
}

The problem here is if you were to check Monday then tuesday & wednesday will be hidden, but if you then check saturday, there is a collision as sunday & monday will be hidden, yet tuesday & wednesday will remain hidden:

Please see jsFiddle

Any pointers in the right direction is appreciated

Answer 1

I like Pablo's answer. I think you should use that instead. My solution works but is a little dirty. Here it is anyway: https://jsfiddle.net/ndaj4x3L/3/

if($('#check'+next).is(":checked")) {
    $('#check'+next).trigger('click');
    $('#check'+next).hide();
    $('#check'+id).trigger('change');
}

EDIT: The reason I trigger the change again after I triggered the click is because for some reason the loop stops after the function runs again. Could be something to do with variable names being the same or something, I am not really sure, but that should fix it anyway.

Answer 2

Maybe if you hide also the preview days and uncheck the hidden elements could be a good solution.

function scheduleSelection(id,duration,mode) {
//var oneDay = 86400;
var totalDays = duration;

if(totalDays>1) {
    totalDays--;
    var next = parseInt(id)+1;
    var prev = parseInt(id)-1;
    for(i=1;i<=totalDays;i++) {
        if(next>7) { next = 1; }
        if(prev<1) { prev = 7; }
        if(mode=='on') {
            toHide[next] = 1;
            toHide[prev] = 1
            $('#check'+next).hide();
            $('#check'+next).attr("checked",false);
            $('#check'+prev).hide();
            $('#check'+prev).attr("checked",false);
        }else{
            toHide[next] = 0;
            toHide[prev] = 0;
            $('#check'+prev).show();
            $('#check'+next).show();
        }
        next++;
        prev--;
    }
  }
}

example jsFiddle