Basically its an availability schedule calendar.
Seven checkboxes has the same class. Then other seven boxes has the same class. There are total of 49 checkboxes and total 7 classes. So I want these checkboxes to behave like radio buttons. i.e No two checkboxes of same class can be checked at a time. For example, If someone checks the box with class 'earlyMorning' . When he checks the other checkbox with the same class the first one should be unchecked. Here is my html. Right now writing only 21 checkboxes.
<table> <tr>
<th>Early Morning<br /><small>6am-9am</small></th>
<td><input type=checkbox class=earlyMorning name=field_807[] id=field_871_0 value=Early Morning 6am-9am Monday style=display: none;></td>
<td><input type=checkbox class=lateMorning name=field_807[] id=field_872_1 value=Early Morning 6am-9am Tuesday style=display: none;></td>
<td><input type=checkbox class=earlyAfternoon name=field_807[] id=field_873_2 value=Early Morning 6am-9am Wednesday style=display: none;></td>
<td><input type=checkbox class=lateAfternoon name=field_807[] id=field_874_3 value=Early Morning 6am-9am Thursday style=display: none;></th>
<td><input type=checkbox class=earlyEvening name=field_807[] id=field_875_4 value=Early Morning 6am-9am Friday style=display: none;></td>
<td><input type=checkbox class=lateEvening name=field_807[] id=field_876_5 value=Early Morning 6am-9am Saturday style=display: none;></td>
<td><input type=checkbox class=overnight name=field_807[] id=field_877_6 value=Overnight 12am-6am Sunday style=display: none;></td>
</tr>
<tr>
<th>Late Morning<br /><small>9am-12pm</small></th>
<td><input type=checkbox class=earlyMorning name=field_807[] id=field_878_7 value=Late Morning 9am-12pm Monday style=display: none;></td>
<td><input type=checkbox class=lateMorning name=field_807[] id=field_879_8 value=Late Morning 9am-12pm Tuesday style=display: none;></td>
<td><input type=checkbox class=earlyAfternoon name=field_807[] id=field_880_9 value=Late Morning 9am-12pm Wednesday style=display: none;></td>
<td><input type=checkbox class=lateAfternoon name=field_807[] id=field_881_10 value=Late Morning 9am-12pm Thursday style=display: none;></th>
<td><input type=checkbox class=earlyEvening name=field_807[] id=field_882_11 value=Late Morning 9am-12pm Friday style=display: none;></td>
<td><input type=checkbox class=lateEvening name=field_807[] id=field_883_12 value=Late Morning 9am-12pm Saturday style=display: none;></td>
<td><input type=checkbox class=overnight name=field_807[] id=field_884_13 value=Overnight 12am-6am Sunday style=display: none;></td>
</tr>
<tr>
<th>Early Afternoon<br /><small>12pm-3pm</small></th>
<td><input type=checkbox class=earlyMorning name=field_807[] id=field_885_14 value=Early Afternoon 12pm-3pm Monday style=display: none;></td>
<td><input type=checkbox class=lateMorning name=field_807[] id=field_886_15 value=Early Afternoon 12pm-3pm Tuesday style=display: none;></td>
<td><input type=checkbox class=earlyAfternoon name=field_807[] id=field_887_16 value=Early Afternoon 12pm-3pm Wednesday style=display: none;></td>
<td><input type=checkbox class=lateAfternoon name=field_807[] id=field_888_17 value=Early Afternoon 12pm-3pm Thursday style=display: none;></th>
<td><input type=checkbox class=earlyEvening name=field_807[] id=field_889_18 value=Early Afternoon 12pm-3pm Friday style=display: none;></td>
<td><input type=checkbox class=lateEvening name=field_807[] id=field_890_19 value=Early Afternoon 12pm-3pm Saturday style=display: none;></td>
<td><input type=checkbox class=overnight name=field_807[] id=field_891_20 value=Overnight 12am-6am Sunday style=display: none;></td>
</tr></table>
I have found a nice example here but its not working in my case.
make checkbox behave like radio buttons with javascript
Based on the above tutorial, I tried this but not working
$(.earlyMorning).each(function()
{
$(this).change(function()
{
$(.earlyMorning).prop('checked',false);
$(this).prop('checked',true);
});
});