[JavaScript] Nieaktywne pole tekstowe (input text)

W tym krótkim wpisie pokażę jak zrobić formularz z nieaktywnym polem input text, które aktywować się będzie warunkowo - w tym przykładzie po zaznaczeniu odpowiedniego checkboksa.

Formularz

Tworząc formularz nadajemy tagom input text atrybut disabled co czyni je nieaktywnymi. W tagach input checkbox dodajemy atrybut onclick z wywołaniem funkcji setEnabled - będzie to funkcja ustawiająca dane pole tekstowe jako aktywne.

<form action="" method="post">
    <p><input type="checkbox" name="checkbox1" id="checkbox1" onclick="setEnabled(event);" /> marka</p>
    <p><input type="checkbox" name="checkbox2" id="checkbox2" onclick="setEnabled(event);" /> kolor</p>
    <p><input type="checkbox" name="checkbox3" id="checkbox3" onclick="setEnabled(event);" /> rocznik</p>
    <p><input type="text" id="text-checkbox1" name="name" disabled /></p>
    <p><input type="text" id="text-checkbox2" name="name" disabled /></p>
    <p><input type="text" id="text-checkbox3" name="name" disabled /></p>
</form>

JavaScript

Funkcja setEnabled to tylko 5 linii kodu. Do funkcji trzeba przekazać zdarzenie. Następnie do stałej checkbox przypisujemy EventTarget zdarzenia click, czyli będzie to aktualnie kliknięty checkbox. Pozostaje tylko sprawdzić czy kliknięty checkbox jest zaznaczony, czyli odczytujemy wartość właściwości checked, która zwróci true lub false. Adekwatnie do zwróconej wartości ustawiana jest właściwość disabled dla pola tekstowego (true lub false).

function setEnabled(e) {
  
  const checkbox = e.currentTarget;
  
  if(checkbox.checked == true) document.getElementById('text-' + checkbox.name).disabled = false;
  
  else document.getElementById('text-' + checkbox.name).disabled = true;

}