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


Автор: scalalaz 26.2.2010, 15:58
Возникла такая задачка. Есть форма в форме несколько элементов select. В зависимости от выбранного значения в одном списке, нужно делать доступным либо недоступным второй список. Как повесить обработчик на изменение значений понятно. А вот как с помощью JavaScript менять свойство disabled в нужном списке не пойму. Подскажите как сделать или дайте ссылку на пример.

Автор: comtat 26.2.2010, 16:22
Код

        var item = document.getElementById(_ID);
    item.disabled = !item.disabled;

Автор: 12345c 26.2.2010, 16:22
объект.setAttribute('disabled', 'disabled'); , как обычно.

Автор: scalalaz 26.2.2010, 16:31
Вот пример

<html><head></head><body background=back.jpg>
<p>Внимание! Поля, отмеченные звёздочкой (*) обязательны для заполнения!</p>
<script language="JavaScript">
function SelectChange(element) {
var InputElement = document.getElementsByTagName("who")[0];
if (element.value == "Исходящая корреспонденция") {
InputElement.setAttribute("disabled","true");
}
else
{
InputElement.setAttribute("disabled","false");
}
return true;
}
</script>
<form action="default.asp" method="POST">
<table>
<tr><td>* Способ доставки документа: </td><td><select name="typ">
<option>
<option value="Факс">Факс
<option value="Обычная почта">Обычная почта
<option value="Заказное письмо">Заказное письмо
<option value="Прочее">Прочее
<option value="Курьерская доставка">Курьерская доставка</select></td></tr>
<tr><td>* Отправитель: </td><td><input name="snd" value="<% =FullName %>" MAXLENGTH=254></td></tr>
<tr><td>* Получатель(и): </td><td><TEXTAREA NAME="rcpt" ROWS=4 COLS=40></TEXTAREA></td></tr>
<tr><td>* Тема: </td><td><input name="sbj" MAXLENGTH=254></td></tr>
<tr><td>* Направление документа: </td><td><select name="who" OnChange="SelectChange(this)">
<option>
<option value="Внутренняя корреспонденция">Внутренняя корреспонденция
<option value="Исходящая корреспонденция">Исходящая корреспонденция
<option value="Входящая корреспонденция">Входящая корреспонденция</select></td></tr>
<tr><td>   Префикс организации отправителя для исходящей корреспонденции: </td><td><select name="pref">
<option>
<option value="КП">КП
<option value="КПВ">КПВ
<option value="ИКПВ">ИКПВ
<option value="ИКПТ">ИКПТ
<option value="ИКПЕ">ИКПЕ</select></td></tr>
<tr><td>Примечание: </td><td><TEXTAREA NAME="prim" ROWS=4 COLS=40></TEXTAREA></td></tr>
</table><br>
<INPUT type=submit  value="Отправить"></form>
<img src=powered.jpg>
</body></html>

Вопрос по строчкам выделенным жирным шрифтом. Как установить свойство disabled? И вообще возможно ли динамическое изменение доступности элемента?

Автор: comtat 26.2.2010, 18:42
Код

<html><head></head><body background=back.jpg>
<p>Внимание! Поля, отмеченные звёздочкой (*) обязательны для заполнения!</p>
<script language="JavaScript">
function SelectChange(element) {
    var InputElement = document.getElementById("who");
    InputElement.disabled = (element.value == "Исходящая корреспонденция")?true:false;
    return true;
}
</script>
<form action="default.asp" method="POST">
<table>
<tr><td>* Способ доставки документа: </td><td><select name="typ">
<option>
<option value="Факс">Факс
<option value="Обычная почта">Обычная почта
<option value="Заказное письмо">Заказное письмо
<option value="Прочее">Прочее
<option value="Курьерская доставка">Курьерская доставка</select></td></tr>
<tr><td>* Отправитель: </td><td><input name="snd" value="<% =FullName %>" MAXLENGTH=254></td></tr>
<tr><td>* Получатель(и): </td><td><TEXTAREA NAME="rcpt" ROWS=4 COLS=40></TEXTAREA></td></tr>
<tr><td>* Тема: </td><td><input name="sbj" MAXLENGTH=254></td></tr>
<tr><td>* Направление документа: </td><td><select id="who" name="who" OnChange="SelectChange(this)">
<option>
<option value="Внутренняя корреспонденция">Внутренняя корреспонденция
<option value="Исходящая корреспонденция">Исходящая корреспонденция
<option value="Входящая корреспонденция">Входящая корреспонденция</select></td></tr>
<tr><td>   Префикс организации отправителя для исходящей корреспонденции: </td><td><select name="pref">
<option>
<option value="КП">КП
<option value="КПВ">КПВ
<option value="ИКПВ">ИКПВ
<option value="ИКПТ">ИКПТ
<option value="ИКПЕ">ИКПЕ</select></td></tr>
<tr><td>Примечание: </td><td><TEXTAREA NAME="prim" ROWS=4 COLS=40></TEXTAREA></td></tr>
</table><br>
<INPUT type=submit  value="Отправить"></form>
<img src=powered.jpg>
</body></html>

Автор: bars80080 26.2.2010, 20:10
Цитата(scalalaz @  26.2.2010,  15:31 Найти цитируемый пост)
getElementsByTagName("who")

Цитата(scalalaz @  26.2.2010,  15:31 Найти цитируемый пост)
<select name="who"

улыбнуло

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