Поменять цвет Checkbox в зависимости от ситуации
 

Доброго времени суток!
У меня такая проблема.
Есть форма бронирования. Элементы времени - это чекбоксы. (фото прилагаю)
На данный момент присутствует 2 цвета. 1й цвет - время свободно, 2й цвет время занято и
подтверждено администратором. Теперь нужно сделать 3й цвет - время занято и не подтверждено
администратором.
Подскажите в каком направлении копать.

Сильно в этом сомневаюсь. :D Т.к. чекбоксы выглядят вот так

<input type='checkbox' />

Чекбокс имеет только два состояния "выбран" и "не выбран"...

И все таки это чекбоксы, вот код:


<table>
<tr>
<td><label><input type="checkbox" name="list" value="1" id="1"><span>7:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="2" id="2"><span>8:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="3" id="3"><span>8:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="4" id="4"><span>9:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="5" id="5"><span>9:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="6" id="6"><span>10:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="7" id="7"><span>10:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="8" id="8"><span>11:00</span></p></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="list" value="9" id="9"><span>11:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="10" id="10"><span>12:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="11" id="11"><span>12:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="12" id="12"><span>13:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="13" id="13"><span>13:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="14" id="14"><span>14:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="15" id="15"><span>14:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="16" id="16"><span>15:00</span></p></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="list" value="17" id="17"><span>15:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="18" id="18"><span>16:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="19" id="19"><span>16:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="20" id="20"><span>17:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="21" id="21"><span>17:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="22" id="22"><span>18:00</span></p></label></td>
<td><label><input type="checkbox" name="list" value="23" id="23"><span>18:30</span></p></label></td>
<td><label><input type="checkbox" name="list" value="24" id="24"><span>19:00</span></p></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="vr25" value="25" id="25"><span>19:30</span></p></label></td>
<td><label><input type="checkbox" name="vr26" value="26" id="26"><span>20:00</span></p></label></td>
<td><label><input type="checkbox" name="vr27" value="27" id="27"><span>20:30</span></p></label></td>
<td><label><input type="checkbox" name="vr28" value="28" id="28"><span>21:00</span></p></label></td>
<td><label><input type="checkbox" name="vr29" value="29" id="29"><span>21:30</span></p></label></td>
<td><label><input type="checkbox" name="vr30" value="30" id="30"><span>22:00</span></p></label></td>
<td><label><input type="checkbox" name="vr31" value="31" id="31"><span>22:30</span></p></label></td>
<td><label><input type="checkbox" name="vr32" value="32" id="32"><span>23:00</span></p></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="vr33" value="33" id="33"><span>23:30</span></p></label></td>
<td><label><input type="checkbox" name="vr34" value="34" id="34"><span>24:00</span></p></label></td>
<td><label><input type="checkbox" name="vr35" value="35" id="35"><span>24:30</span></p></label></td>
<td><label><input type="checkbox" name="vr36" value="36" id="36"><span>1:00</span></p></label></td>
<td><label><input type="checkbox" name="vr37" value="37" id="37"><span>1:30</span></p></label></td>
<td><label><input type="checkbox" name="vr38" value="38" id="38"><span>2:00</span></p></label></td>
<td><label><input type="checkbox" name="vr39" value="39" id="39"><span>2:30</span></p></label></td>
<td><label><input type="checkbox" name="vr40" value="40" id="40"><span>3:00</span></p></label></td>
</tr>
<tr>
<td><label><input type="checkbox" name="vr41" value="41" id="41"><span>3:30</span></p></label></td>
<td><label><input type="checkbox" name="vr42" value="42" id="42"><span>4:00</span></p></label></td>
<td><label><input type="checkbox" name="vr43" value="43" id="43"><span>4:30</span></p></label></td>
<td><label><input type="checkbox" name="vr44" value="44" id="44"><span>5:00</span></p></label></td>
<td><label><input type="checkbox" name="vr45" value="45" id="45"><span>5:30</span></p></label></td>
<td><label><input type="checkbox" name="vr46" value="46" id="46"><span>6:00</span></p></label></td>
<td><label><input type="checkbox" name="vr47" value="47" id="47"><span>6:30</span></p></label></td>
<td><label><input type="checkbox" name="vr48" value="48" id="48"><span>7:00</span></p></label></td>
</tr>
</table>

<script>
function naiti() {

var checkboxs = document.frm1.getElementsByTagName('input'),
n = checkboxs.length,
time1 ='',
time2 =''

for (var i= 0; i < n;i++) {
if(checkboxs[i].type == 'checkbox' & checkboxs[i].checked) {
time1 = checkboxs[i].value;
break;
}
}

for (var j= 0; j < n;j++) {
if(checkboxs[j].type == 'checkbox' & checkboxs[j].checked) {
time2 = checkboxs[j].value;
}
}


if (Number(time1) < Number(time2)){
for (var k= Number(time1); k < Number(time2); k++){
document.getElementById(k).checked = 'true';
}
var timesumm = (Number(time2) - Number(time1))*0.5;
var key=1;
document.getElementById('timesumm').innerHTML = 'Выбранное время ' + timesumm + ' часа(ов)';
document.getElementById('clock1').value = time1;
document.getElementById('clock2').value = time2;
document.getElementById('clocksumm').value = timesumm;
}

}



function sbros() {

for (var m= 1; m < 49; m++){
document.getElementById(m).checked = '';
}
document.getElementById('timesumm').innerHTML = '';
}




</script>

<script type="text/javascript">
var t1 = document.getElementsByClassName('time1');
var t2 = document.getElementsByClassName('time2');
for (var i=0; i<24; i++){
for (var z= t1[i].innerHTML; z < Number(t2[i].innerHTML)+1; z++){
document.getElementById(z).disabled = 'true';
}
}
</script>

<script type="text/javascript">
var t1 = document.getElementsByClassName('time3');
var t2 = document.getElementsByClassName('time4');
for (var i=0; i<24; i++){
for (var z= t1[i].innerHTML; z < Number(t2[i].innerHTML)+1; z++){

document.getElementById(z).disabled = 'true';



}
}
</script>

Таки нет... :D
По твоему коду ясно видно, что это работают td, label и span... ;)

Но вернемся к чекам...
У них таки два состояния. Третье ты никак в них не впихнешь. :no:
Т.ч. придется тебе в корне переделывать.

Есть идеи как лучше и правильно сделать?
Вот скрин как это сейчас:

т.е. 2я запись еще не подтверждена админом,
и пока она не подтверждена, должен быть другой цвет

Например исключить слабое звено - чекбокс.
Орудовать только классами и атрибутами...