Wyszarzenie selecta jeżeli inny w danym wierszu jest zaznaczony

0

Cześć,
Dopiero zaczynam przygodę z Javascriptem. Bardzo proszę o pomoc przy tym zadaniu: tutaj dla zobrazowania jest mój mały programik: https://jsfiddle.net/35a7jmco/31/
Jeżeli w danej kolumnie select jest zaznaczony na jakąś liczbę, np środkowy na liczbę 3, to pozostałe dwa muszą być wyszarzone i nie może być możliwości wybrania wartości. Można zmienić wartość dla wyszarzonego selecta tylko wtedy jeżeli w tym którym ustawiliśmy jakąś wartość zmienimy na 0.
Wiem, że do tego służy visibility, ale nie wiem za bardzo jak to połączyć aby rozwiązać to zagadnienie, bardzo proszę o jakieś podpowiedzi, czym szczególnie powinienem się zainteresować przy szukaniu rozwiązania?

Pozdrawiam

2

Czasu nie mam, żeby to zrobić za Ciebie, ale mogę dać kilka rad:

  1. dodaj do środkowej (ewentualnie wszystkich, które mają tak działać) kolumny (a właściwie to do selectów w niej zawartych) obsługę zdarzenia ONCHANGE - https://www.w3schools.com/jsref/event_onchange.asp
  2. w tej obsłudze, jeśli wykryjesz, że została wprowadzona jakaś treść, to blokujesz pozostałe elementy
  3. analogicznie - jak użytkownik wybierze ZERO, to musisz resztę odblokować
  4. odnośnie fragmentu "do tego służy visibility" - mam inne zdanie ;) Visibility określa, czy dany element zostanie wyświetlony/czy będzie widzialny. Zamiast tego powinieneś pobawić się cechą "disabled" - https://www.w3schools.com/js/tryit.asp?filename=try_dom_select_disabled
  5. jeśli mogę polecić, to wywal jquery. To, czego chcesz można zrobić w samym JS bez żadnych kombinacji, nie ma sensu dodawać kolejnych bibliotek i tym samym komplikować sobie życie.
0

Wielkie dzięki! Myślę, że już jestem bliżej rozwiązania. Jeżeli dam danej kolumnie w każdym select zdarzenie onchange, w którym funkcja zmienia wartość disabled na true czy false w zależności czy jest to 0 czy też nie to blokuje mi się select w którym to zaznaczam a nie dwa pozostałe. Rozumiem już pomysł i mechanikę ale chyba coś przeoczyłem...

à propos sumowania to nie za bardzo wiedziałem w jaki sposób to zrobić (jestem bardziej przyzwyczajony do pisania w językach kompilowalnych), akurat znalazłem takie rozwiązanie w Jquerry.

2

W podanym przeze mnie przykładzie (link w pkt. 4 poprzedniego posta) masz takie coś:
https://www.w3schools.com/js/tryit.asp?filename=try_dom_select_disabled

document.getElementById("mySelect").disabled=true;

Zobacz - w nawiasie podajesz ID elementu, który chcesz blokować. Czy teraz wiesz jak to ugryźć?

A odnośnie fragmentu "estem bardziej przyzwyczajony do pisania w językach kompilowalnych" - JS jest naprawdę prosty (czasami wręcz prostacki). Jeśli masz jakieś pojęcie o programowaniu - szybko staniesz na nogach i dasz sobie radę :)

0

Tzn. to wiedziałem, kod wygląda mniej więcej w ten sposób: https://jsfiddle.net/35a7jmco/38/
Jak w pierwszym górnym select od lewa dam jakąś wartość to on mi się blokuje. Dla innych to nie działa a nie mam pomysłu by uzależnić od tego inne selecty. Mam trochę za mało obycia w javascripcie, ale wiem że po odpowiedniej ilości zadań problem zniknie :)

2

Każdy select ma mieć swój unikalny id, a o ile dobrze pamiętam to każdy element powinien mieć unikalny ID(czyli nie powinny się powtarzać). Potem w funkcji szukaj tych dwóch pozostałych pól i je wyłącz.

2
function disable() {
    document.getElementById("valueOne").disabled=true;
}
function enable() {
    document.getElementById("valueOne").disabled=false;
}
function myFunction() {
    var x = document.getElementById("valueOne").value;
    if(x==0)
	enable();
	else
	disable();
}

Zobacz - we wszystkich wywołaniach getElementById masz podane "valueOne" - więc czemu inne selecty miałyby się blokować/aktywować? Musisz wskazać, na którym elemencie chcesz wykonać akcję. Obecnie wszystko co napisałeś dotyczy tylko pierwszego elementu, w związku z czym nie dziw się, że tylko on się blokuje.

Zanim zaczniesz dalej pisać/poprawiać - poczytaj dwa wątki poniżej. Dotyczą tez one JavaScript, wyjaśniałem w nim kilku osobom parę rzeczy. Myślę, że Tobie też się przyda z tym zapoznać. Zwróć uwagę zwłaszcza na to, co pisałem o funkcjach i ich parametrach
Canvas - Circle progress
https://4programmers.net/Forum/Off-Topic/Oceny_i_recenzje/312543-prosta_gra_w_js_code_review

0

Ok, przyznam szczerze, że wczoraj nie miałem siły tego kończyć ale dzisiaj mniej więcej coś się udało. Wielkie dzięki za pomoc i wszelkie wskazówki!
Kod obecnie wygląda następująco: http://jsfiddle.net/s751xng3/4/
Jednak mam parę uwag do swojego rozwiązania. Tutaj są dwie tabele a i tak if'ów jest mnóstwo... przy np. 7 tabelach czy ich większej ilości wszystko będzie strasznie nieczytelne...
Czy są na to jakieś prostsze rozwiązania?
No i następna sprawa której nie widać na jsfiddle, jeżeli odpalę to sobie jako pliczek html, powybieram jakieś wartości to wszystko działa dobrze, jednak jeżeli odświeżę stronę to zaznaczone wartości w rzędach zostają takie jakie zaznaczyłem przed odświeżeniem + nie ma już blokad aby w danym wierszu dodać dwie oceny (bardzo istotny i np mało istotny), czego nie miało być. Czy macie jakieś propozycje na rozwiązanie tego zagadnienia? Czemu po odświeżeniu pola nie są już ukryte?

0

Taka porada na szybko (w temacie if'ów) - a jakby znowu wprowadzić jakieś zmienne - coś w stylu (teraz piszę na szybko co mi przyszło do głowy, więc nie daję gwarancji, że to jest optymalna opcja)

var rzad1 = {}
rzad1.aktywny1 = true;
rzad1.aktywny2 = true;
rzad1.aktywny3 = true;

Jak się domyślasz, aktywny1, 2 i 3 oznaczają to, czy dany select jest aktywny. Następnie, podczas zmiany wartości selecta wywołasz funkcję odblokujpola (rzad1.aktywny2); której zadaniem będzie ustalenie, że jedynym aktywnym selectem w rzędzie 1 ma być pole numer 2 (a co za tym idzie - zablokowanie pozostałych).
W ten sposób rozbijasz część odpowiedzialną za przetwarzanie danych i sprawdzanie wartości od części zajmującej się blokowaniem/aktywowaniem konkretnych pól.

Za dużo ifów zawsze jest problemem i świadczy o tym, że konstrukcja programu nie jest dobrze przemyślana, a pewne rzeczy wypadałoby wyrzucić do osobnych funkcji.

A co do odświeżania - czy Ctrl+F5 daje taki sam efekt? To raczej jest kwestia przeglądarki a nie skryptu. Jeśli chcesz ustalić jakieś parametry początkowe - zainteresuj się https://www.w3schools.com/jsref/event_onload.asp i w obsłudze onload (czyli po załadowaniu strony) możesz wymusić konkretne działania - np. przypisanie wszędzie wartości 0 albo zablokowanie/odblokowanie wszystkich (lub wybranych) pól.

1 użytkowników online, w tym zalogowanych: 0, gości: 1