Zmiana koloru tła dynamicznego pola formularza, disabled="disabled" Opcje

[detter]

Witam.
Na wstępie zaznaczę, iż w kwestii Javy jestem totalnie zielony, a odpowiedzi na nurtujące mnie pytanie szukałem dłuuugo...
i niestety nie znalazłem...

Mam formularz w html, w pewnym momencie, dochodzi opcja wyboru, czy użytkownik chce otrzymać fakturę VAT.
użyłem takiej opcji:

[HTML] pobierz, plaintext 
<input type="checkbox" name="nazwa" value="wartość" onclick="
	this.form.elements['vat_firma'].disabled = 
	this.form.elements['vat_miejscowosc'].disabled = 
	this.form.elements['vat_ulica'].disabled = 
	this.form.elements['vat_nip'].disabled = !this.checked" />
[HTML] pobierz, plaintext 

Do pól formularza (vat_firma, vat_miejscowosc, vat_ulica i vat_nip) dodałem opcję:

[HTML] pobierz, plaintext 
disabled="disabled"
[HTML] pobierz, plaintext 

Wszystko działa fajnie i przyjemnie...
Problem polega na tym, iż wygląd formularza mam oparty o css...

I teraz tak:
jak mam zaznaczone pole typu checkbox - normalnie mogę wypełnić interesujące mnie pola,
jeśli pole checbox nie jest zaznaczone: pola są zablokowane i nie można wprowadzać w nich tekstu.
Chciałbym, aby gdy pole checkbox nie jest zaznaczone - to żeby pola mu podlegające zmieniły kolor tła...
Aby je wyróżnić - jako nie aktywne....

Tu mały obrazek, przedstawiający o co mi dokładniej chodzi:



Ma ktoś może jakiś pomysł, jak to rozwiązać?

Dodam tylko, ze cała reszta formularza wygląda tak jak w pierwszej części screena - i chciałbym aby tak pozostało...

[icetique]

Dodawaj klasę do tych inputów po kliknięciu na checkbox:

Kod

this.form.elements['vat_firma'].className = 'disabled';
this.form.elements['vat_firma'].className = 'twojaKlasa disabled'; // lub tak

Ta druga opcja wtedy, gdy masz już jakąś klasę przypisaną do vat_firma.
Jak chcesz zrobić z powrotem enabled, to:

Kod

this.form.elements['vat_firma'].className = '';
  this.form.elements['vat_firma'].className = 'twojaKlasa'; // lub tak

Najlepiej jakąś funkcję zrób, bo inline będzie trochę nieczytelny.

Ten post edytował icetique 31.01.2010, 09:54:33

[blooregard]

iż w kwestii Javy jestem totalnie zielony

JavaScript to nie Java.

[detter]

ok, poprawiam mój błąd: jestem ziolony w JavaScript

Trochę zaczyna mi świtać, ale nie do końca wiem w jaki sposób zastosować te wskazówki....
Może moglibyście podać konkretny przykład jak to ma wyglądać? (cały input....).

PS. przepraszam za marudzenie, ale naprawdę tego nie ogarniam....

[icetique]

Kod

function disable()
  {
  this.form.elements['vat_firma'].disabled = this.form.elements['vat_miejscowosc'].disabled = this.form.elements['vat_ulica'].disabled = this.form.elements['vat_nip'].disabled = true;
  this.form.elements['vat_firma'].className = this.form.elements['vat_miejscowosc'].className = this.form.elements['vat_ulica'].className = this.form.elements['vat_nip'].className = 'disabled';
  }
  
  function enable()
   {
   this.form.elements['vat_firma'].disabled = this.form.elements['vat_miejscowosc'].disabled = this.form.elements['vat_ulica'].disabled = this.form.elements['vat_nip'].disabled = false;
   this.form.elements['vat_firma'].className = this.form.elements['vat_miejscowosc'].className = this.form.elements['vat_ulica'].className = this.form.elements['vat_nip'].className = '';
   }

Kod

input.disabled
  {
  background-color: #aaaaaa;
  }

Kod

<input type="checkbox" name="nazwa" value="wartość" onclick="this.checked ? enable() : disable();" />

Pisane z palca (może nie działać, chodziło mi o przedstawienie idei).

Ten post edytował icetique 31.01.2010, 16:46:39

[detter]

Wow... taką formę wyjaśnienia nawet ja potrafiłem wrzucić do mojego "projektu"

Jednak w linijce:

[PHP] pobierz, plaintext 
this.form.elements['vat_firma'].disabled = this.form.elements['vat_miejscowosc'].disabled = this.form.elements['vat_ulica'].disabled = this.form.elements['vat_nip'].disabled = true;
[PHP] pobierz, plaintext 

Jest błąd składni - a ja niestety nie widzę gdzie jest coś nie tak

[icetique]

Kod

<script type="text/javascript">
function disable()
   {
   document.getElementById('vat_firma').disabled = document.getElementById('vat_miejscowosc').disabled = document.getElementById('vat_ulica').disabled = document.getElementById('vat_nip').disabled = true;
   document.getElementById('vat_firma').className = document.getElementById('vat_miejscowosc').className = document.getElementById('vat_ulica').className = document.getElementById('vat_nip').className = 'disabled';
   }
  
   function enable()
    {
    document.getElementById('vat_firma').disabled = document.getElementById('vat_miejscowosc').disabled = document.getElementById('vat_ulica').disabled = document.getElementById('vat_nip').disabled = false;
   document.getElementById('vat_firma').className = document.getElementById('vat_miejscowosc').className = document.getElementById('vat_ulica').className = document.getElementById('vat_nip').className = '';
    }

</script>

<form>
<input type="text" id="vat_firma" name="vat_firma" disabled="disabled" />
<input type="text" id="vat_miejscowosc" name="vat_firma" disabled="disabled" />
<input type="text" id="vat_ulica" name="vat_firma" disabled="disabled" />
<input type="text" id="vat_nip" name="vat_firma" disabled="disabled" />
<input type="checkbox" name="nazwa" value="wartość" onclick="this.checked ? enable() : disable();" />
</form>

Masz, teraz sprawdzone. Mój błąd. Jak wrzucisz do htmla, to zobaczysz, że działa. Teraz możesz dostosować pod siebie.

Ten post edytował icetique 31.01.2010, 17:42:45

[lnn]

w jQuery ostatnio robilem podobna funkcje

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<head>
<script language="text/javascript">
$(document).ready(function(){ 
   $('input[name=wyzywienie_on]').click(function() {
   if (this.checked == true) $(".check").attr('disabled', false); else $(".check").attr('disabled', true); 
 });
 
});</script>
 </head>
<body>
<label for="wyzywienie_on">dostępne</label><input type="checkbox" name="wyzywienie_on" />
<label for="nazwa">label</label><input id="input_text" class="check" type="text" name="nazwa" disabled="disabled"><br /></body>
[HTML] pobierz, plaintext 

Ten post edytował lnn 31.01.2010, 18:42:09

[detter]

ok, teraz załapałem
Serdecznie dzięki za pomoc!