Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Radio buttony - wylaczanie pozostalych po kliknieciu na jeden z nich
Forum PHP.pl > Forum > Po stronie przeglądarki
swiezak
Mam taki oto formularz:
  1. <form id="jsForm" action="" method="post">
  2. <div class="panel-group" id="accordion">
  3. <div class="panel panel-primary">
  4. <div class="panel-heading">
  5. <h4 class="panel-title">
  6. <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
  7. <i class="fa fa-caret-right"></i> {% trans %}Odbiór osobisty{% endtrans %}</a>
  8. </h4>
  9. </div>
  10. <div id="collapse1" class="panel-collapse collapse in">
  11. <div class="panel-body">
  12. <div class="form-group">
  13. <input class="radio_btn" type="radio" checked="checked" name="payment[1]" value="1"> {% trans %}Płatność gotówką{% endtrans %}
  14. </label>
  15. <input class="radio_btn" type="radio" name="payment[1]" value="2"> {% trans %}Płatność przelewem z góry{% endtrans %}
  16. </label>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. <div class="panel panel-primary">
  22. <div class="panel-heading">
  23. <h4 class="panel-title">
  24. <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
  25. <i class="fa fa-caret-right"></i> {% trans %}Kurier{% endtrans %}</a>
  26. </h4>
  27. </div>
  28. <div id="collapse2" class="panel-collapse collapse">
  29. <div class="panel-body">
  30. <div class="form-group">
  31. <input class="radio_btn" type="radio" name="payment[2]" value="3"> {% trans %}Płatność za pobraniem{% endtrans %}
  32. </label>
  33. <input class="radio_btn" type="radio" name="payment[2]" value="2"> {% trans %}Płatność przelewem z góry{% endtrans %}
  34. </label>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </form>


Chcialbym uzyskac efekt, aby po kliknieciu na wybrany radio buttom pozostale nie byly zaznaczone. W tej chwili istnieje mozliwosc ustawienia 2 radio buttonow w tym samym czasie.
Jak tego dokonac?

Probuje w ten sposob, ale nie dziala:
  1. $('#accordion').on('hidden.bs.collapse', function (e) {
  2. $(e.target).find('input[type=radio]:first').prop("checked", true)
  3. });



Prosze o pomoc.
ShaggyAG
Daj i im taki sam atrybut name

ok ide po kawe.
Sorry
swiezak
No wlasnie tu jest problem, bo payment[1] przechowuje id sposobu dostawy - w tym wypadku 1.
kapslokk
W takim razie rozbij to na 2 grupy radio
1 bedzie wybierala sposb dostawy a 2 sposob platnosci
swiezak
A gdyby do kazdego inputa dodac zdarzenie onclick i w jakis magiczny sposob wylaczac pozostale radio buttony?

Cos w rodzaju:
  1. <input class="radio_btn" type="radio" checked="checked" name="payment[1]" value="1" onclick="disable('...');">

rad11
Rozbij to na grupy i mniej wiecej coś takiego:

  1. <input name="payment[1]" type="radio" class="groupRadio first"/>
  2. <input name="payment[1]" type="radio" class="groupRadio first"/>
  3.  
  4. <input name="payment[2]" type="radio" class="groupRadio second"/>
  5. <input name="payment[2]" type="radio" class="groupRadio second"/>

  1. $(".groupRadio").on('click', function () {
  2. switch ($(this).hasClass("first")) {
  3. case true:
  4. $(".second").removeAttr("checked");
  5. break;
  6. case false:
  7. $(".first").removeAttr("checked");
  8. break;
  9. }
  10. });

swiezak
Dziekuje serdecznie za poswiecony czas i pomoc.

Dla zainteresowanych.
W przypadku trzech grup radio buttonow mozna wykorzystac ponizszy kod:
  1. $(".groupRadio").on('click', function () {
  2. switch ($(this).hasClass("first")) {
  3. case true:
  4. $(".second").removeAttr("checked");
  5. $(".third").removeAttr("checked");
  6. break;
  7. case false:
  8. $(".first").removeAttr("checked");
  9. if ($(this).hasClass("second")) {
  10. $(".third").removeAttr("checked");
  11. }
  12. if ($(this).hasClass("third")) {
  13. $(".second").removeAttr("checked");
  14. }
  15. break;
  16. }
  17. });



Pozdrawiam.
trueblue
Dla dowolnej liczby grup:


  1. <input name="payment[1]" type="radio" class="groupRadio" />
  2. <input name="payment[1]" type="radio" class="groupRadio" />
  3.  
  4. <input name="payment[2]" type="radio" class="groupRadio" />
  5. <input name="payment[2]" type="radio" class="groupRadio" />
  6.  
  7. <input name="payment[3]" type="radio" class="groupRadio" />
  8. <input name="payment[3]" type="radio" class="groupRadio" />
  9.  
  10. $(".groupRadio").on('click', function() {
  11. $('.groupRadio:not([name="'+$(this).attr('name')+'"])').removeAttr("checked");
  12. });
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.