Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.10.2015, 15:32
Новичок на форуме
Отправить личное сообщение для kz___alex Посмотреть профиль Найти все сообщения от kz___alex
 
Регистрация: 27.10.2015
Сообщений: 5

Поменять цвет Checkbox в зависимости от ситуации
Доброго времени суток!
У меня такая проблема.
Есть форма бронирования. Элементы времени - это чекбоксы. (фото прилагаю)
На данный момент присутствует 2 цвета. 1й цвет - время свободно, 2й цвет время занято и
подтверждено администратором. Теперь нужно сделать 3й цвет - время занято и не подтверждено
администратором.
Подскажите в каком направлении копать.
Изображения:
Тип файла: jpg Бронь.jpg (52.4 Кб, 10 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 27.10.2015, 16:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от kz___alex
Элементы времени - это чекбоксы.
Сильно в этом сомневаюсь. Т.к. чекбоксы выглядят вот так

<input type='checkbox' />
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2015, 16:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от kz___alex
На данный момент присутствует 2 цвета. 1й цвет - время свободно, 2й цвет время занято и
подтверждено администратором. Теперь нужно сделать 3й цвет - время занято и не подтверждено
администратором.
Чекбокс имеет только два состояния "выбран" и "не выбран"...
Ответить с цитированием
  #4 (permalink)  
Старый 28.10.2015, 10:44
Новичок на форуме
Отправить личное сообщение для kz___alex Посмотреть профиль Найти все сообщения от kz___alex
 
Регистрация: 27.10.2015
Сообщений: 5

Сообщение от ksa Посмотреть сообщение
Сильно в этом сомневаюсь. Т.к. чекбоксы выглядят вот так

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 28.10.2015, 10:45
Новичок на форуме
Отправить личное сообщение для kz___alex Посмотреть профиль Найти все сообщения от kz___alex
 
Регистрация: 27.10.2015
Сообщений: 5

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.10.2015, 11:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от kz___alex
И все таки это чекбоксы, вот код:
Таки нет...
По твоему коду ясно видно, что это работают td, label и span...

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

Последний раз редактировалось ksa, 28.10.2015 в 11:41.
Ответить с цитированием
  #7 (permalink)  
Старый 28.10.2015, 12:07
Новичок на форуме
Отправить личное сообщение для kz___alex Посмотреть профиль Найти все сообщения от kz___alex
 
Регистрация: 27.10.2015
Сообщений: 5

Сообщение от ksa Посмотреть сообщение
Таки нет...
По твоему коду ясно видно, что это работают td, label и span...

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

Есть идеи как лучше и правильно сделать?
Вот скрин как это сейчас:
Изображения:
Тип файла: jpg Бронь.jpg (67.8 Кб, 3 просмотров)
Ответить с цитированием
  #8 (permalink)  
Старый 28.10.2015, 12:09
Новичок на форуме
Отправить личное сообщение для kz___alex Посмотреть профиль Найти все сообщения от kz___alex
 
Регистрация: 27.10.2015
Сообщений: 5

т.е. 2я запись еще не подтверждена админом,
и пока она не подтверждена, должен быть другой цвет
Ответить с цитированием
  #9 (permalink)  
Старый 28.10.2015, 13:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от kz___alex
Есть идеи как лучше и правильно сделать?
Например исключить слабое звено - чекбокс.
Орудовать только классами и атрибутами...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поменять цвет текста в зависимости от условия chernik_m jQuery 2 27.05.2014 15:32
Поменять цвет строки при изменении ячейки в datatable Devlin jQuery 10 07.11.2012 18:30
Надо поменять цвет одной ссылки на странице, в зависимости от того куда она ведет. stasok Общие вопросы Javascript 6 15.10.2012 10:34
Как в общем меню для всех страниц поменять класс определенного пункта в зависимости о phenom Элементы интерфейса 2 08.04.2011 11:09
поменять цвет у нескольких строк в таблице Root Элементы интерфейса 4 21.04.2008 10:30