[JS]Aktywacja pola - Problem z IE

Witam
napisałem taki kodzik, który po zaznaczeniu checkbox pola stają się aktywne, a po odznaczeniu stają się z powrotem nie aktywne.Tak działa pod FireFox'em. Co muszę zrobić żeby działało również pod Internet Explorerem?

<script type="text/javascript" language="javascript">
function show_hide1(box) {
if(box.checked !=true)
  {	  
  show_hide1a.disabled=true;
  show_hide1b.disabled=true;
  show_hide1c.disabled=true;
  }
else
  {
  show_hide1a.disabled=false;
  show_hide1b.disabled=false;
  show_hide1c.disabled=false;
  }
} 
</script>
<!-- -------------------------------------------------------------------------------------------- -->
<input type="checkbox" onclick="show_hide1(this)" class="radio" name="sur" id="sur_checkbox">
<label for=sur_checkbox>Cos</label>


  <select disabled id="show_hide1a" style="width:206px;">
    <option>&gt;Wybierz&lt;</option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
  </select>

<input disabled id="show_hide1b" type="text" name="emailll" size="30" >

<input disabled id="show_hide1c" type="text" name="email" size="30" >

No i mam "mały" problem, po zaznaczenia pola checkbox pola nie stają się aktywne.(Chodzi o przeglądarkę IE, na FF działa, pod Operą nie jestem w stanie sprawdzić na razie)

Pozdrawiam

Obiekty winno się identyfikować za pomocą instrukcji document.getElementById('id')

A o jakiej wersji IE mówisz bo u mnie to działa. Ale tak jak poprzedni napisał, nie powinno się odwoływać bezpośrednio do pola, bo nie w każdej przeglądarce może to działać. Takie zmienne nie powinny być globalnie dostępne bo może wystąpić konflikt nazw. Dziwię się, że w ogóle to działa.

A tak w ogóle to jeśli chcesz sobie oszczędzić stresu i nerwów radzę zainteresowanie się jQuery, piszesz jeden kod, który działa pod każdą przeglądarką. Odkąd przeszedłem na jQuery, tracę znacznie mniej włosów :P.

Zamiana zdarzenia onclick na onchange powinna pomóc.

I tak jak Demonical Monk napisał - dodaj atrybuty id do każdego elementu w formularzu i się odwołuj poprzez getElementById.

function show_hide1(box) {
if($(box).attr("checked") != true)
  {	  
  $("#show_hide1a").attr("disabled","disabled");
  $("#show_hide1b").attr("disabled","disabled");
  $("#show_hide1c").attr("disabled","disabled");
  }
else
  {
  $("#show_hide1a").attr("disabled","");
  $("#show_hide1b").attr("disabled","");
  $("#show_hide1c").attr("disabled","");
  }
} 
</script>

A taki kod jest już poprawny? Używam jQuery

Odpowiedzcie proszę. Chodzi mi o poprawność językową z przeglądarkami działa ;)

Jeśli kod Ci działa pod przeglądarkami, to znaczy, że jest ok :)
Poprawność językowa ? Jak widzisz, jest poprawny, nie ma błędów składni itp.

Jak najbardziej poprawny tylko dałbym zamiast: .attr("disabled", "")
Tak: .removeAttr("disabled")
tak dla pewności :).

Edit:

Tak w ogóle można całkowicie odseparować JS od HTML i umieścić w oddzielnym pliku taki kod:

$(document).ready(
	function() {
		$("#sur_checkbox").change(
			function() {
				if($(this).attr("checked") != true) {    
					$("#show_hide1a").attr("disabled", "disabled");
					$("#show_hide1b").attr("disabled", "disabled");
					$("#show_hide1c").attr("disabled", "disabled");
				} else {
					$("#show_hide1a").removeAttr("disabled");
					$("#show_hide1b").removeAttr("disabled");
					$("#show_hide1c").removeAttr("disabled");
				} 
			}
		);
	}
);

Ewentualnie dla zwiększenia szybkości (nie jestem pewien czy na pewno będzie działać, ale możesz spróbować):

$(document).ready(
	function() {
		$("#sur_checkbox").change(
			function() {
				if($(this).attr("checked") != true) {    
					$("#show_hide1a").attr("disabled", "disabled").
					next().attr("disabled", "disabled").
					next().attr("disabled", "disabled");
				} else {
					$("#show_hide1a").removeAttr("disabled").
					next().removeAttr("disabled").
					next().removeAttr("disabled");
				} 
			}
		);
	}
);

A to jest konieczne?$(document).ready(
...
);

Bo ja tego nie mam.

Przydatne - powoduje, że zdarzenia są podpinane po załadowaniu strony. Bez tego to będziesz miał funkcję z której nic nie wynika ;-)

$(document).ready(
        function() {
             ....
        }
);

A to też jest konieczne? :-)

FF to nie IE napisał(a)

$(document).ready(
        function() {
             ....
        }
);

A to też jest konieczne? :-)

Tak jak napisał poprzednik.
Ogólnie chodzi o to, że jeśli cały kod zapiszesz w sekcji <head><script></script></head> to powinien on wykonać się po załadowaniu strony. Ale jeśli skrypt umieścisz np. na końcu pliku lub go załączysz w innym miejscu strony przez <script src="script.js"></script> to taki skrypt zostanie wykonany w miejscu gdzie on występuje.

I np. jeśli masz tak:
<script src="script.js"></script><input type="checkbox" class="radio" name="sur" id="sur_checkbox">

i w pliku script.js masz ten kod, który Ci podałem to nie będzie tam widoczne pole #sur_checkbox, gdyż nie zostało ono jeszcze wczytane przez przeglądarkę. A zapisanie kodu w $(document).ready(); mówi przeglądarce tyle: "Ok w tym miejscu podaję Ci kod, który masz wykonać, ale wykonaj go gdy wczytasz już całą stronę, bo będę odwoływał się do pól, które jeszcze nie są załadowane". Tak to można mniej więcej ująć :).

Tak po przemyśleniu i sprawdzeniu to nie jest potrzebne.

Powodem tego jest: użytkownik ma klikać po załadowaniu. A tak to ten skrypt nic nie robi po dodaniu:

$(document).ready(
...
);

Wykonuje się to po załadowaniu dokumentu, a nie po klikaniu. Czy coś źle rozumiem?

Tan skrypt po załadowaniu podpina zdarzenie, żeby coś się działo po zmianie (change) na #sur_checkbox. Bez podpięcia zdarzenia to nie będzie działało.

Oczywiście możesz zrobić <input type="checkbox" onchange="jakaśFunkcja()" />, ale nie jest to zalecane (brak rozdzielenia warstw treści i zachowania), zaleca się jednak podpinanie zdarzeń w taki sposób jak wyżej.

$(document).ready(function()
 {
 $("#sur_checkbox").change(function()
  {
 ...
  }
 );}
);

Ale jestem ślepy, dopiero zauważyłem, że jeszcze change trzeba ;)

Dzięki za cierpliwość ;)