Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Aktywacja checkboxa po wyborze wpisu z listy select
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
duda007
Witam, mam pewien problem, poniżej wklejam kawałek kodu z którym mam problem... założeniem jest, aby po wybraniu któregoś wpisu z listy <select> aktywowalo przypisane mu pole/pola checkbox.

  1. <script type="text/javascript" language="JavaScript">
  2. function off_all(h) {
  3. h.ch1.disabled = true;
  4. h.ch2.disabled = true;
  5. h.ch3.disabled = true;
  6. }
  7. function on_k(h) {
  8. h.ch1.disabled = false;
  9. h.ch2.disabled = true;
  10. h.ch3.disabled = true;
  11. }
  12. function on_o(h) {
  13. h.ch1.disabled = false;
  14. h.ch2.disabled = false;
  15. h.ch3.disabled = true;
  16. }
  17. <form method="POST" action="index.php?p=podsumowanie">
  18. <select name="umowa">
  19. <option onclick="off_all(this.form)">Select1</option>
  20. <option onclick="off_all(this.form)">Select2</option>
  21. <option onclick="on_k(this.form)">Select3</option>
  22. <option onclick="on_k(this.form)">Select4</option>
  23. <option onclick="on_o(this.form)">Select5</option>
  24. <option onclick="on_o(this.form)">Select6</option>
  25. <option onclick="off_all(this.form)">Select7</option>
  26. <option onclick="off_all(this.form)">Select8</option>
  27. <p><input type="checkbox" name="ch1" value="blabla1" disabled="disabled"> Opcja1 </p>
  28. <p><input type="checkbox" onclick="this.form.elements['ch3'].disabled = this.checked" name="ch2" value="blabla2" disabled="disabled"> Opcja2 </p>
  29. <p><input type="checkbox" onclick="this.form.elements['ch2'].disabled = this.checked" name="ch3" value="blabla3" disabled="disabled"> Opcja3 </p>
  30. <input type="submit" value="DALEJ">
  31. </form>


Mój problem polega na tym, że powyższy kod działa tylko na przeglądarce Firefox (na Chrome i IE w ogóle nie aktywują się checkboxy obojętnie czego bym nie wybrał z listy). Wiem że do selecta powinno się używać zamiast onclick, onchange, ale po takiej zmianie w ogóle na żadnej przeglądarce nie uzyskuje pożądanego efektu. Jakieś sugestie?
nospor
onclick przypisuje się dla SELECT a nie dla OPTION. Tyle w temacie smile.gif
kamil4u
No nie do końca masz rację ~nospor smile.gif Należy użyć zdarzenia (on)change, nie (on)click.
duda007
ok czyli onclick (onchange) mam przerzucić do znacznika <select> to jest ok, tylko w takim razie jak przerobić te funkcje żeby to dzialalo. Bo teraz miałem oddzielne funkcje do każdej opcji, a teraz wszystko musze zawrzeć w 1 funkcji. I moje pytanie, jak to rozwiązać? Bo troszke mi to zmienia koncepcje...
nospor
Cytat
No nie do końca masz rację ~nospor Należy użyć zdarzenia (on)change, nie (on)click.
Chodziło mi o to, że zdarzenie ma być na SELECT a nie na OPTION.... starajmy sie czytać ze zrozumieniem smile.gif

duda.... a jaki masz problem? this.value bedzie zawierać wartosc opcji, którą wybrałeś - i po problemie
<select onchange="alert(this.value)">
kamil4u
To Ty staraj się czytać/pisać ze zrozumiem własne posty.
Cytat
onclick przypisuje się dla SELECT

To jest nieprawda. Przypisuje się onchange.

Cytat
Chodziło mi o to, że zdarzenie ma być na SELECT a nie na OPTION
Może i o to Ci chodziło, ale tego nie napisałeś.

Ew. użyj selectedIndex i w funkcji zdarzenia switch
I pokaż co Ci wyszło( nawet jak nie działa ). Spróbujemy coś poprawić smile.gif
nospor
Po pierwsze: no jak się czepiasz dosłownie wszystkiego....
Po drugie: onclick też można przypisać to SELECT mój ty miły kolego. Więc nie gadaj głupot, że nie można. W tym akurat przypadku wszakże lepsze jest onchange, co nie zmienia faktu, że onclick też można.
duda007
ok, troszke poprawilem i już działa smile.gif nie pomyślałem w sumie żeby to zrobić na switch, ale może to dobra opcja (doczytam później jak w JS wygląda składnia switcha), na chwile obecną kod wygląda tak:
  1. <script type="text/javascript" language="JavaScript">
  2. function disable(h) {
  3. if (h == "all"){
  4. document.getElementById("ch1").disabled=true;
  5. document.getElementById("ch2").disabled=true;
  6. document.getElementById("ch3").disabled=true;
  7. }
  8. if (h == "sw1"){
  9. document.getElementById("ch1").disabled=false;
  10. document.getElementById("ch2").disabled=true;
  11. document.getElementById("ch3").disabled=true;
  12. }
  13. if (h == "sw2"){
  14. document.getElementById("ch1").disabled=true;
  15. document.getElementById("ch2").disabled=false;
  16. document.getElementById("ch3").disabled=false;
  17. }
  18. }
  19. <form method="POST" action="index.php?p=podsumowanie">
  20. <select name="umowa" onchange="disable(this.value)">
  21. <option value="all"></option>
  22. <option value="all">Opcja1</option>
  23. <option value="all">Opcja2</option>
  24. <option value="sw1">Opcja3</option>
  25. <option value="sw1">Opcja4</option>
  26. <option value="sw2">Opcja5</option>
  27. <option value="sw2">Opcja6</option>
  28. <option value="all">Opcja7</option>
  29. <option value="all">Opcja8</option>
  30. </select><br>
  31. <p><input type="checkbox" name="ch1" id="ch1" value="blabla1" disabled="disabled"> Opcja1 </p>
  32. <p><input type="checkbox" id="ch2" onclick="this.form.elements['ch3'].disabled = this.checked" name="ch2" value="blabla2" disabled="disabled"> Opcja2 </p>
  33. <p><input type="checkbox" id="ch3" onclick="this.form.elements['ch2'].disabled = this.checked" name="ch3" value="blabla3" disabled="disabled"> Opcja3 </p>
  34. <input type="submit" value="DALEJ">
  35. </form>



EDIT.
Pojawił się pewien problem... wcześniej nie było wartości value wiec formularz wysylal przez POST wartość która była pomiędzy <option>. Teraz jest przypisane value... da się to rozwiązać za pomocą np. id zamiast value? No nie wiem... tak żebym nie musiał pisać x warunków (do każdej opcji oddzielny)?
nospor
A nie możesz do value wkładać to co należy, czyli wartosci option zamiast all,sw1 i sw2? Przecież to co teraz robisz jest bezsensu... value ma odzwierciedlać value a nie ułatwiać budowanie warunków smile.gif
duda007
@nospor, ale jak widzisz, potrzebne mi jest w sumie 3 opcje, a w takim przypadku jak pod value bede miał inne opcje, bede musiał robić 7 warunków (w tym 4 takie same). Próbowałem zrobić taki warunek (oczywiście po przypisaniu do value odpowiednich wartości):
  1. if ((h == "Opcja1") || (h == "Opcja2")){
  2. ...
  3. }


ale niestety nie działa takie coś wink.gif Mogę oczywiście zrobić 7x if, albo switch z 7 opcjami, ale to raczej w tym przypadku droga na około...
kamil4u
To zrób tak jak ja Ci radziłem. Nie przypisuj value, a skorzystaj z selectedIndex

--edit--
Aczkolwiek fakt faktem, że jak przypiszesz value i zrobisz tak jak radzi ~nospr będzie lepiej pod względem HTML-owskim smile.gif
nospor
O to:
if ((h == "Opcja1") || (h == "Opcja2")){

...

}
powino działać bez problemu. Pewnie zrobiłeś jakiś głupi błąd. Pokaż cały kod
duda007
faktycznie zrobiłem głupi błąd... już poprawiłem i działa jak należy smile.gif
Mianowicie mój błąd polegał że w pierwszym warunku dałem
  1. if (h == (("Opcja3" || "Opcja4")){

i wydaje mi sie że tutaj był błąd i nie sprawdzało z jakiejś przyczyny nawet drugiego warunku wink.gif ale już działa jak trzeba, dziękuje za pomoc smile.gif
nospor
Cytat
i wydaje mi sie że tutaj był błąd i
Tu się nie ma co wydawać.... to jest dość oczywiste wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.