[jQuery] Radio buttony - wylaczanie pozostalych po kliknieciu na jeden z nich Opcje

[swiezak]

Mam taki oto formularz:

[HTML] pobierz, plaintext 
<form id="jsForm" action="" method="post">
	<div class="panel-group" id="accordion">
		<div class="panel panel-primary">
			<div class="panel-heading">
			  <h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
				<i class="fa fa-caret-right"></i> {% trans %}Odbiór osobisty{% endtrans %}</a>
			  </h4>
			</div>
			<div id="collapse1" class="panel-collapse collapse in">
			 <div class="panel-body">
					<div class="form-group">
						<label>
							<input class="radio_btn" type="radio" checked="checked" name="payment[1]" value="1"> {% trans %}Płatność gotówką{% endtrans %}
						</label>
						<label>
							<input class="radio_btn" type="radio" name="payment[1]" value="2"> {% trans %}Płatność przelewem z góry{% endtrans %}
						</label>
					</div>
			  </div>
			</div>
		</div>
		<div class="panel panel-primary">
			<div class="panel-heading">
			  <h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
				<i class="fa fa-caret-right"></i> {% trans %}Kurier{% endtrans %}</a>
			  </h4>
			</div>
			<div id="collapse2" class="panel-collapse collapse">
			  <div class="panel-body">
					<div class="form-group">
						<label>
							<input class="radio_btn" type="radio" name="payment[2]" value="3"> {% trans %}Płatność za pobraniem{% endtrans %}
						</label>
						<label>
							<input class="radio_btn" type="radio" name="payment[2]" value="2"> {% trans %}Płatność przelewem z góry{% endtrans %}
						</label>
					</div>
			  </div>
			</div>
		</div>
	</div>
</form>
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
		$('#accordion').on('hidden.bs.collapse', function (e) {
			$(e.target).find('input[type=radio]:first').prop("checked", true)
		});
[HTML] pobierz, plaintext 

Prosze o pomoc.

[ShaggyAG]

Daj i im taki sam atrybut name

ok ide po kawe.
Sorry

Ten post edytował ShaggyAG 18.02.2016, 08:53:41

[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:

[HTML] pobierz, plaintext 
<input class="radio_btn" type="radio" checked="checked" name="payment[1]" value="1" onclick="disable('...');">
[HTML] pobierz, plaintext 

[rad11]

Rozbij to na grupy i mniej wiecej coś takiego:

[HTML] pobierz, plaintext 
<input name="payment[1]" type="radio" class="groupRadio first"/>
<input name="payment[1]" type="radio" class="groupRadio first"/>
 
<input name="payment[2]" type="radio" class="groupRadio second"/>
<input name="payment[2]" type="radio" class="groupRadio second"/>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
$(".groupRadio").on('click', function () {
            switch ($(this).hasClass("first")) {
                case true:
                    $(".second").removeAttr("checked");
                    break;
                case false:
                    $(".first").removeAttr("checked");
                    break;
            }
        });
[PHP] pobierz, plaintext 

[swiezak]

Dziekuje serdecznie za poswiecony czas i pomoc.

Dla zainteresowanych.
W przypadku trzech grup radio buttonow mozna wykorzystac ponizszy kod:

[HTML] pobierz, plaintext 
		$(".groupRadio").on('click', function () {
                switch ($(this).hasClass("first")) {
                    case true:
                        $(".second").removeAttr("checked");
						$(".third").removeAttr("checked");
                        break;
                    case false:
                        $(".first").removeAttr("checked");
						if ($(this).hasClass("second")) {
							$(".third").removeAttr("checked");
						}
						if ($(this).hasClass("third")) {
							$(".second").removeAttr("checked");
						}
                        break;
                }
            });
[HTML] pobierz, plaintext 

Pozdrawiam.

Ten post edytował swiezak 18.02.2016, 12:13:22

[trueblue]

Dla dowolnej liczby grup:

[HTML] pobierz, plaintext 
<input name="payment[1]" type="radio" class="groupRadio" />
<input name="payment[1]" type="radio" class="groupRadio" />
 
<input name="payment[2]" type="radio" class="groupRadio" />
<input name="payment[2]" type="radio" class="groupRadio" />
 
<input name="payment[3]" type="radio" class="groupRadio" />
<input name="payment[3]" type="radio" class="groupRadio" />
 
$(".groupRadio").on('click', function() {
  $('.groupRadio:not([name="'+$(this).attr('name')+'"])').removeAttr("checked");
});
[HTML] pobierz, plaintext