Отображать поле ввода текста, только если установлен другой флажок - PullRequest
Новая
       4

Отображать поле ввода текста, только если установлен другой флажок

0 голосов
/ 07 октября 2011

У меня есть форма, которая отправляет данные в файл proccess.php. В форме я проверяю ввод. Есть флажок, который спрашивает, используется ли тандемный велосипед. Я хочу, чтобы оно отображало текстовое поле ввода только в том случае, если в этом поле стоит галочка. вот мой код формы для этой части: 

<tr>
  <td>
    <span style="font-weight:bold">Tandem:</span>
  </td>
  <td valign="middle">
    <input type="checkbox" name="tandem">&nbsp;
    <input style="visibility:hidden" type="text" name="partnerid" id="partnerid">
  </td>
</tr>

Обычно, если флажок «тандем» установлен, установите поле ввода текста «partnerid» visibility:visible;

Ответы [ 2 ]

3 голосов
/ 07 октября 2011

Я рекомендую использовать этот код. Когда свойство disabled входного элемента равно true, элемент не может быть отредактирован. Пользователь обычно имеет указание, что поле ввода не должно использоваться. 

<input type="checkbox" name="tandem" onchange="this.form.partnerid.disabled=!this.checked" />

Пояснение к коду:

  • onchange=".." срабатывает при изменении значения флажка. Это может произойти либо при нажатии, либо с помощью клавиатуры Событие щелчка НЕ ​​является достаточным для этой цели.
  • this.form из контекста слушателя события элемента формы ссылается на форму
    Все именованные элементы формы могут быть доступны через this.form.element_name или this.form["element_name"].
  • Когда флажок установлен (checked==true), вход не должен быть отключен (disabled=false). Это делается с помощью переговоров: this.form.partnerid.disabled = !this.checked.
2 голосов
/ 07 октября 2011

Предположительно, входные данные находятся в форме, поэтому вы можете поставить прослушиватель щелчка на флажок, который делает ввод текста видимым или нет, в зависимости от того, установлен он или нет: 

  <input type="checkbox" name="tandem" onclick="
    this.form.partnerid.style.visibility = this.checked? 'visible' : 'hidden';
  ">

Может показаться логичным использовать событие change, но в IE оно не будет срабатывать до тех пор, пока флажок не потеряет фокус, что немного противоречит интуиции, поэтому используйте click.

...