Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Активизирование элемента списка ??


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

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

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

Автор: KuZyagroup 13.2.2008, 06:03
направить в нужную сторону:
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
Да.. спасибо за ответ, то что надо.. в цикле запустил - все работает. Еще раз спасибо  smile 

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

Автор: jaspeen 13.2.2008, 17:53
Меняем событие "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
да, все верно, спасибо большое..

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)