How to checked next+"n" checkbox and group by group checked and unchecked

It's a booking page.

---

<div>

<form action="">
<fieldset>
    Select Services ： 
    <select id="services_plan">
        <option value="Services 1" data-t="1">Services 1</option>
        <option value="Services 2" data-t="2">Services 2</option>
        <option value="Services 3" data-t="3">Services 3</option>
        <option value="Services 4" data-t="4">Services 4</option>   
    </select>
</fieldset>     

<fieldset>
Time:<br />
<input type="checkbox" class="t_select" name="time" value="t1"> 12:00~12:30<br />
<input type="checkbox" class="t_select" name="time" value="t2" disabled=""> 12:30~13:00<br />
<input type="checkbox" class="t_select" name="time" value="t3"> 13:00~13:30<br />
<input type="checkbox" class="t_select" name="time" value="t4"> 13:30~14:00<br />
<input type="checkbox" class="t_select" name="time" value="t5"> 14:00~14:30<br />
<input type="checkbox" class="t_select" name="time" value="t6"> 14:30~15:00<br />
<input type="checkbox" class="t_select" name="time" value="t7"> 15:00~15:30<br />
<input type="checkbox" class="t_select" name="time" value="t8"> 15:30~16:00<br />
<input type="checkbox" class="t_select" name="time" value="t9"> 16:00~16:30<br />
<input type="checkbox" class="t_select" name="time" value="t10"> 16:30~17:00<br />
<input type="checkbox" class="t_select" name="time" value="t11"> 17:00~17:30<br />
<input type="checkbox" class="t_select" name="time" value="t12"> 17:30~18:00<br />
<input type="checkbox" class="t_select" name="time" value="t13"> 18:00~18:30<br />
<input type="checkbox" class="t_select" name="time" value="t14"> 18:30~19:00<br />

</fieldset>
</form>

</div>

js

$('.t_select').change(function () {
    var total_time = $('#services_plan option:selected').attr('data-t')-1;
    if ($(this).is(":checked")) {
        $(this).parent().nextAll().slice(0,total_time).find(":checkbox").prop( "checked", true );
    }
});

select#services_plan will be let user select a services

services option I add a data-attr "data-t"

data-t=1 = 30mins

data-t=2 = 60mins  1hr

data-t=3 = 90mins   

data-t=4 = 120mins  2hr

etc....

onchange the time checkbox.. will be check what services you select.

I get the data-t. var as total_time

if total_time = 4 (120mins)

checkbox will be find next 3 checkbox and checked them.

but, I still have 3 questions and problems.

---

1. about clear other checked on chang

if user select services4 (data-t=4),

go to check 13:00~13:30

jquery will be checked

13:00~13:30,

13:30~14:00,

14:00~14:30,

14:30~15:00

but if you click a other time....

eg. 16:00~16:30

you will see 5 times had checked.

I need if you click 16:00~16:30

jquery to checked them. 16:00~16:30 16:30~17:00 17:00~17:30 17:30~18:00

and clear checked other.

2. continuous hours

If I choose a Services 4, I need 4 time range,

If 12:30:13:00 is disabled（It has been reserved）, How to dont let user select the t1?

3. other more user friendly plugins suggest?

I just find the date range plugins.

I have not seen about time range plugins.