Sav2907,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.table{
border-collapse: collapse;
}
.table td{
border: 1px solid #000;
padding: 10 10;
}
.check{
background: green;
}
.click{
cursor: pointer;
}
</style>
<table class="table">
<tr><td colspan="6" align="center" class="abc">1-12</td></tr>
<tr>
<td rowspan="3">1.</td>
<td class="click">01</td>
<td class="click">02</td>
<td class="click">03</td>
<td class="click">04</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">05</td>
<td class="click">06</td>
<td class="click">07</td>
<td class="click">08</td>
</tr>
<tr>
<td class="click">09</td>
<td class="click">10</td>
<td class="click">11</td>
<td class="click">12</td>
</tr>
<tr><td colspan="6" align="center" class="abc">13-24</td></tr>
<tr>
<td rowspan="3">2.</td>
<td class="click">13</td>
<td class="click">14</td>
<td class="click">15</td>
<td class="click">16</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">17</td>
<td class="click">18</td>
<td class="click">19</td>
<td class="click">20</td>
</tr>
<tr>
<td class="click">21</td>
<td class="click">22</td>
<td class="click">23</td>
<td class="click">24</td>
</tr>
</table>
<script>
var tr = $(".table tbody tr");
$(".num").each(function(indx, sel) {
var cl = $(".click", tr.slice(indx * 4, indx * 4 + 4)).on("click", function() {
if(sel.value) return;
alert($("td", tr.eq(indx * 4)).attr("class"));
$(this).toggleClass("check");
var disabled = !cl.is(".check");
$(sel).prop("disabled", disabled);
})
$(sel).on("change", function() {
!sel.value && cl.removeClass("check") && $(sel).prop("disabled", true);
})
});
</script>
