Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: przelacznik z dwoma przyciskami
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
wojtektorr
7.02.2014, 16:40:55
Witam serdecznie, mam na stronie dwa divy i dwa przyciski, divy są ukryte. Klikając na button "in" pokazuje się div "wew" i akutomatycznie przycisk staj sie nieaktywny, w tym momencie mogę wybrać drógi przycisk "out" i po jego kliknięciu pokazuje sie div "zew" i z kolei ten przyciks staje sie nie aktywny a aktywnym staje się przycisk "in" i tak w kółko. Nie mogęzrobić tego przełączania miedzy nieaktywnymi przyciskami. Myślę z z kodu więcej zrozumiecie.
[HTML] pobierz, plaintext 
  1. <div id="change">
  2.     <table align="left">
  3.         <tr align="center">
  4.             <td><input type="button" class="in" value="Zgłoszenie wewnętrzne" onclick="java script:change(this);"/></td>
  5.             <td><input type="button" class="out" value="Zgłoszenie zewnętrzne" onclick="java script:change(this);"/></td>
  6.         </tr>
  7.     </table>
  8. </div>
  9.  
  10. <script type="text/javascript">
  11.  
  12. function change(item){
  13.     if(item.className == "in") {
  14.         item.disabled = "true";
  15.         document.getElementById("zew").style.display = "none";
  16.         document.getElementById("wew").style.display = "block";
  17.     }
  18.     else {
  19.         item.disabled = "true";
  20.         document.getElementById("zew").style.display = "block";
  21.         document.getElementById("wew").style.display = "none";
  22.  
  23.         document.getElementByClassName("in").setAttribute("disabled", "false");
  24.     }
  25. }
  26. </script>
[HTML] pobierz, plaintext


Ta ostatnia linia kodu (document.getElementByClassName("in").setAttribute("disabled", "false")wink.gif nie chce zadziałać, dlaczego?
werdan
7.02.2014, 17:56:34
Sprobuj:

document.getElementByClassName("in").removeAttribute("disabled");
Turson
7.02.2014, 18:06:45
Cytat(wojtektorr @ 7.02.2014, 16:40:55 ) *
Ta ostatnia linia kodu (document.getElementByClassName("in").setAttribute("disabled", "false")wink.gif nie chce zadziałać, dlaczego?

Sprawdź czy to coś zmienia
[HTML] pobierz, plaintext 
  1. <input type="submit" disabled=true>
  2. <input type="submit" disabled=false>
[HTML] pobierz, plaintext

potem wyciągnij wniosek wink.gif
wojtektorr
7.02.2014, 19:54:49
Hmm efekt taki sam czy disabled=true czy disabled=false, ale jak usunac ten atrybut po uprzednim jego ustawieniu nadal nie wiem :/
Kshyhoo
7.02.2014, 20:21:24
O to Ci chodzi?
[JAVASCRIPT] pobierz, plaintext 
  1. function disable_enable(_this) {
  2.   if (_this == 'in') {
  3.     document.test.in.disabled=true;
  4.     document.test.out.disabled=false;
  5.   }	else	{
  6.     document.test.in.disabled=false;
  7.    document.test.out.disabled=true;
  8.   }
  9. }
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <form name="test" >
  2.   <input type="button" id="in" value="Zgłoszenie wewnętrzne" name="b1" onclick="disable_enable('in');" >
  3.   <input type="button" id="out" value="Zgłoszenie zewnętrzne" name="b2" onclick="disable_enable('out');">
  4. </form>
[HTML] pobierz, plaintext
wojtektorr
8.02.2014, 10:18:25
Dokładnie o to, dzięki! Jeszcze jedno, czy muszę te buttony umieszczać w jakimś formularzu mogę sie do nich w funkcji odwołać jakoś z pominięciem document....out.disabled=false;
Kshyhoo
8.02.2014, 10:36:54
Bez FORM nie będzie chciało włączać DIV.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//en">
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5.  
  6. <meta http-equiv="Content-Type" content="text/html;" charset="utf-8">
  7. <meta http-equiv="Content-Language" content="pl">
  8. <style type="text/css">
  9. #wew {
  10.   position: relative;
  11.   width: 500px;
  12.   height: 300px;
  13.   background-color: #f00;
  14.   margin: 0 auto;
  15.   display: none;
  16. }
  17. #zew {
  18.   position: relative;
  19.   width: 500px;
  20.   height: 300px;
  21.   background-color: #33f;
  22.   margin: 0 auto;
  23.   display: none;
  24. }
  25. input[disabled] {
  26.   color: red;
  27.   text-decoration: none;
  28. }
  29. </style>
  30.  
  31. <script language="JavaScript">
  32. function disable_enable(_this) {
  33.   if (_this == 'in') {
  34.     document.test.in.disabled=true;
  35.     document.test.out.disabled=false;
  36.     document.getElementById("zew").style.display = "none";
  37.     document.getElementById("wew").style.display = "block";
  38.   }  else  {
  39.     document.test.in.disabled=false;
  40.     document.test.out.disabled=true;
  41.     document.getElementById("zew").style.display = "block";
  42.     document.getElementById("wew").style.display = "none";
  43.   }
  44. }
  45. </script>
  46. </head>
  47. <body>
  48.  
  49. <div id="change">
  50.   <table align="left">
  51.     <tr align="center">
  52.       <form name="test" >
  53.         <td>
  54.           <input type="button" id="in" value="Zgłoszenie wewnętrzne" name="b1" onclick="disable_enable('in');" >
  55.         </td>
  56.         <td>
  57.           <input type="button" id="out" value="Zgłoszenie zewnętrzne" name="b2" onclick="disable_enable('out');">
  58.         </td>
  59.       </form>
  60.     </tr>
  61.   </table>
  62. </div><br /><br />
  63.  
  64. <div id="wew"></div>
  65. <div id="zew"></div>
  66.  
  67. </body>
  68. </html>
[HTML] pobierz, plaintext
wojtektorr
10.02.2014, 10:22:59
W IE 8 nie działa, za niedziałanie odpowiadają te linie: document.test.in.disabled=true;
document.test.out.disabled=false;
Kshyhoo
10.02.2014, 10:30:55
Cytat(wojtektorr @ 10.02.2014, 10:22:59 ) *
W IE 8 nie działa

W IE mało co działa wink.gif
owca_82
10.02.2014, 13:19:36
Do "inputów" odwołuj się poprzez atrybut "name" a nie id
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.