VPF::Активизирование элемента списка ??

AlexRR

Дата 13.2.2008, 04:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 13.2.2008

Репутация: нет
Всего: нет

дано: список.. пример одной строки этого списка: "checkbox и поле ввода данных", где текст около checkbox'а серый, а поле ввода неактивное.

задача: чтобы при установлении галок в checkbox'ах соответствующие поля ввода данных становились активными и менялся цвет напротив включенного checkbox'а.

вопрос: есть ли примеры подобной реализации.. пока не представляю, как делать неактивное поле ввода и включение его по установлению checkbox'a... хотя бы направьте меня в нужную сторону. Спасибо.

KuZyagroup

Дата 13.2.2008, 06:03 (ссылка)

(нет голосов)

Загрузка ...

magento solution

Профиль
Группа: Участник
Сообщений: 283
Регистрация: 16.4.2007
Где: Kiev

Репутация: 1
Всего: 4

направить в нужную сторону:
chechbox имеет события onChange и onSelect

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="creation-date" content="02/20/2007">
<link rel="stylesheet" type="text/css" href="my.css">
<script>
<!-- 
function myChange(i){
    if (document.getElementById('iText'+i).disabled) {
        document.getElementById('iSpan'+i).style.color= "#000000";
        document.getElementById('iText'+i).disabled   = "";
    } 
    else {
        document.getElementById('iSpan'+i).style.color= "#CACACA";
        document.getElementById('iText'+i).disabled   = "disabled";    
    }
}
//-->
</script>
</head>
<body>
  <form action="#">                     
    <input     id="iCheckbox1" type="checkbox" onchange="myChange(1); return false;" />
        <span  id="iSpan1" style="color:#CACACA">SomeText</span>
        <input id="iText1" type="text" value="some text" disabled="disabled"/>
    <br />
     <input     id="iCheckbox2" type="checkbox" onchange="myChange(2); return false;" />
        <span  id="iSpan2" style="color:#CACACA">SomeText</span>
        <input id="iText2" type="text" value="some text" disabled="disabled"/>
    <br />
     <input     id="iCheckbox3" type="checkbox" onchange="myChange(3); return false;" />
        <span  id="iSpan3" style="color:#CACACA">SomeText</span>
        <input id="iText3" type="text" value="some text" disabled="disabled"/>
    <br />
  </form>
</body>
</html>

Добавлено через 3 минуты и 2 секунды
ДА, вместо того что бы проименовывать айдишники их можно запустить масивом. Например iCheckbox[]
Точно делать как не помню, но можно помотреть в исходникак phpmyadmin. Там вообще много чего полезного

AlexRR

Дата 13.2.2008, 15:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 13.2.2008

Репутация: нет
Всего: нет

Да.. спасибо за ответ, то что надо.. в цикле запустил - все работает. Еще раз спасибо smile

AlexRR

Дата 13.2.2008, 17:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 13.2.2008

Репутация: нет
Всего: нет

хотя нет.. сейчас протестил в IE.. там проблемы: при установлении checkbox не активируется поле ввода и не меняется стиль текста.. o_0

jaspeen

Дата 13.2.2008, 17:53 (ссылка)

(нет голосов)

Загрузка ...

Чертяка

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 4.10.2007

Репутация: нет
Всего: нет

Меняем событие "change" на "click", и в обработчиках нада возвращать true. Примерно так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<script>
<!-- 
function myChange(i){
    if (document.getElementById('iText'+i).disabled) {
        document.getElementById('iSpan'+i).style.color= "#000000";
        document.getElementById('iText'+i).disabled   = "";
    } 
    else {
        document.getElementById('iSpan'+i).style.color= "#CACACA";
        document.getElementById('iText'+i).disabled   = "disabled";    
    }
    return true;
}
//-->
</script>
</head>
<body>
  <form action="#">                     
    <input id="iCheckbox1" type="checkbox" onclick="myChange(1);" />
    <span  id="iSpan1" style="color:#CACACA">SomeText</span>
    <input id="iText1" type="text" value="some text" disabled="disabled"/>
    <br />
    <input id="iCheckbox2" type="checkbox" onclick="myChange(2);" />
    <span  id="iSpan2" style="color:#CACACA">SomeText</span>
    <input id="iText2" type="text" value="some text" disabled="disabled"/>
    <br />
    <input id="iCheckbox3" type="checkbox" onclick="myChange(3);" />
    <span id="iSpan3" style="color:#CACACA">SomeText</span>
    <input id="iText3" type="text" value="some text" disabled="disabled"/>
    <br />
  </form>
</body>
</html>

AlexRR

Дата 13.2.2008, 17:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 13.2.2008

Репутация: нет
Всего: нет

да, все верно, спасибо большое..

Это сообщение отредактировал(а) AlexRR - 13.2.2008, 18:17

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »