Присваивание параметра disabled для checkbox/radio по событию
Здравствуйте.
Есть следующий код:
<html>
<head>
<script type="text/javascript">
function EnableDisable(x)
{
var a = x.id; // Получаем id выбранного элемента
y = parseInt(a) % 10; // Узнаем последнюю цифру id выбранного элемента
if (y == 1) // Определяем, какие id у отсавщихся элементов в строке
{
var b = parseInt(a)+1;
var c = parseInt(a)+2;
}
if (y == 2) // в зависимости от последней цифры
{
var b = parseInt(a)+1;
var c = parseInt(a)-1;
}
if (y == 3) // выбранного элемента
{
var b = parseInt(a)-2;
var c = parseInt(a)-1;
}
if (document.getElementById(a).checked == true) // Делаем disabled другие элементы строчки
{
document.getElementById(b).disabled = true;
document.getElementById(c).disabled = true;
}
if (document.getElementById(a).checked == false) // или снимаем с них disabled
{
document.getElementById(b).disabled = false;
document.getElementById(c).disabled = false;
}
}
</script>
</head>
<body>
1
<input type=checkbox name=1 id=1231 onclick='EnableDisable(this);'>
<input type=checkbox name=2 id=1232 onclick='EnableDisable(this);'>
<input type=checkbox name=3 id=1233 onclick='EnableDisable(this);'>
<br>
2
<input type=checkbox name=1 id=4561 onclick='EnableDisable(this);'>
<input type=checkbox name=2 id=4562 onclick='EnableDisable(this);'>
<input type=checkbox name=3 id=4563 onclick='EnableDisable(this);'>
<br>
3
<input type=checkbox name=1 id=7891 onclick='EnableDisable(this);'>
<input type=checkbox name=2 id=7892 onclick='EnableDisable(this);'>
<input type=checkbox name=3 id=7893 onclick='EnableDisable(this);'>
</body>
<html>
Суть - из MySQL в html-форму вытягиваются записи с уникальными id. Напротив каждой записи делается три (пять, десять) чекбоксов. Каждый столбик чекбоксов получает уникальный номер. Каждый чекбокс искуственно получает уникальный id в виде "id из базы + номер столбика чекбоксов". При выборе одного из чекбоксов в строке остальные становятся не активными, при снятии выбора они активируются. Написанная выше функция все это делает. Мне нужно, чтобы в каждом столбике пользователь мог выбрать только одну галочку - оптимально вместо чекбокса поставить группы радиокнопок (по столбикам name=1, name=2, name=3). Теперь вопрос. Если эту функцию приклеить к радиокнопке, то как получить id кнопки, которая будет терять атрибут checked, при клике на другой переключатель с того-же столбика? Я не могу додуматься (ввиду слабых познаний javascript) и поэтому не могу вернуть переключатели в активное состояние. Прошу не копировать весь код моей формы, а только подсказать алгоритм получения id. Буду благодарен за помощь. |
Игося, по клику на radio-переключатель N-ного столбца записывать в соответствующую переменную/массив № переключателя в столбце...
id элементов нужно начинать с латинской буквы, иначе в старых браузерах робить не будет да и name нормальный не помешало бы вам поставить |
Спасибо lord2kim-у за помощь.
Переработанное решение выглядит так:
<html>
<head>
<script type="text/javascript">
function EnableDisable(x)
{
var a = x.id; // Получаем id выбранного элемента
var name = x.name; // Получаем name выбранного элемента
var elems = document.getElementsByName(x.name); // Записываем все элементы с таким именем в список
for (var i=0; i<elems.length; i++) // и прогоняем через цикл
{
var input = elems[i]; // Объявляем транзитную переменную дабы цикл не глючил
var k = input.value; // Получаем значение каждого элемента с заявленным name
z = parseInt(k) % 10; // Узнаем последнюю цифру каждого элемента
if (z == 1) // Определяем, какие id у оставшихся элементов в строке
{
var l = parseInt(k)+1;
var m = parseInt(k)+2;
}
if (z == 2) // в зависимости от последней цифры
{
var l = parseInt(k)+1;
var m = parseInt(k)-1;
}
if (z == 3) // выбранного элемента
{
var l = parseInt(k)-2;
var m = parseInt(k)-1;
}
if (document.getElementById(k).checked == false && // Cнимаем disabled с других элементов
document.getElementById(l).checked == false && // с таким же name, если на них не выбраны
document.getElementById(m).checked == false) // значения из других столбцов
{
document.getElementById(l).disabled = false;
document.getElementById(m).disabled = false;
}
} //После этого приводим в нужное состояние строчку только что выбранной кнопки
y = parseInt(a) % 10; // Узнаем последнюю цифру нового выбранного элемента
if (y == 1) // Определяем, какие id у оставшихся элементов в строке
{
var b = parseInt(a)+1;
var c = parseInt(a)+2;
}
if (y == 2) // в зависимости от последней цифры
{
var b = parseInt(a)+1;
var c = parseInt(a)-1;
}
if (y == 3) // выбранного элемента
{
var b = parseInt(a)-2;
var c = parseInt(a)-1;
}
if (document.getElementById(a).checked == true) // Делаем элемент disabled
{
document.getElementById(b).disabled = true;
document.getElementById(c).disabled = true;
}
}
</script>
</head>
<body>
1
<input type=radio name='first' id=1231 value=1231 onclick='EnableDisable(this);'>
<input type=radio name='second' id=1232 value=1232 onclick='EnableDisable(this);'>
<input type=radio name='third' id=1233 value=1233 onclick='EnableDisable(this);'>
<br>
2
<input type=radio name='first' id=4561 value=4561 onclick='EnableDisable(this);'>
<input type=radio name='second' id=4562 value=4562 onclick='EnableDisable(this);'>
<input type=radio name='third' id=4563 value=4563 onclick='EnableDisable(this);'>
<br>
3
<input type=radio name='first' id=7891 value=7891 onclick='EnableDisable(this);'>
<input type=radio name='second' id=7892 value=7892 onclick='EnableDisable(this);'>
<input type=radio name='third' id=7893 value=7893 onclick='EnableDisable(this);'>
<br>
4
<input type=radio name='first' id=7531 value=7531 onclick='EnableDisable(this);'>
<input type=radio name='second' id=7532 value=7532 onclick='EnableDisable(this);'>
<input type=radio name='third' id=7533 value=7533 onclick='EnableDisable(this);'>
<br>
</body>
<html>
|
| Часовой пояс GMT +3, время: 19:47. |