Показать / скрыть переключатели, основанные на других переключателях - PullRequest
Новая
       28

Показать / скрыть переключатели, основанные на других переключателях

0 голосов
/ 15 октября 2018

У меня есть два набора переключателей.Один для типа платежа и один для суммы.

Если тип оплаты оплачен, я хочу показать сумму, если она бесплатна, то нет.У меня это работает в основном, но если пользователь переключается с платных на бесплатные кнопки суммы, чтобы остаться.

Как мне их скрыть, и установить значение на ноль? 

$(function() {
  $('#payment_type').change(function() {
    var optionClass = $(this).val();
    if (optionClass == "paid") {
      $('#amount').show();
    } else if (optionClass == "free") {
      $('#amount').hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Session Type" class="col-lg-2 control-label">{{trans('Session Type')}}</label>
  <div class="col-lg-10">
    <label class="radio-inline">

                <input type="radio" name="payment_type" value="free"
                  @if($onlineCounsellingApplication->payment_type == 'free')
                    checked
                  @endif class="payment_type_radio">
                  Free
              </label>

    <label class="radio-inline">
                <input type="radio" name="payment_type" value="paid" id="payment_type"
                  @if($onlineCounsellingApplication->payment_type == 'paid')
                    checked
                  @endif class="payment_type_radio">
                  Paid
              </label>
  </div>
</div>

<div class="form-group">
  <label for="amount" class="col-lg-2 control-label">{{trans('Amount')}}</label>
  <div class="col-lg-10" id="amount" style="display:none">
    <label class="radio-inline">

                <input type="radio" name="amount" value="20"
                  @if($onlineCounsellingApplication->amount == '20')
                    checked
                  @endif class="amount_radio">
                  €20
              </label>

    <label class="radio-inline">
                <input type="radio" name="amount" value="30"
                  @if($onlineCounsellingApplication->amount == '30')
                    checked
                  @endif class="amount_radio">
                  €30
              </label>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Используйте общее имя переключателей в качестве селектора вместо id, чтобы прикрепить событие к обоим радиоприемникам, а затем переключить отображение с помощью метода jQuery .toggle().

ПРИМЕЧАНИЕ: Я предлагаю использовать conditional (ternary) operator вместо @if/@endif, например: 

<input type="radio" name="payment_type" {{$onlineCounsellingApplication->payment_type=='free'?'checked':''}} value="free" class="payment_type_radio">


$(function() {
  $('input:radio[name="payment_type"]').change(function() {
    $('#amount').toggle($(this).val() === "paid");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Session Type" class="col-lg-2 control-label">Session Type</label>
  <div class="col-lg-10">
    <label class="radio-inline">
        <input type="radio" name="payment_type" value="free" checked class="payment_type_radio">Free</label>

    <label class="radio-inline">
        <input type="radio" name="payment_type" value="paid" id="payment_type" class="payment_type_radio">Paid</label>
  </div>
</div>

<div class="form-group">
  <label for="amount" class="col-lg-2 control-label"></label>
  <div class="col-lg-10" id="amount" style="display:none">
    <label class="radio-inline">

                <input type="radio" name="amount" value="20" checked class="amount_radio">€20</label>

    <label class="radio-inline">
                <input type="radio" name="amount" value="30" class="amount_radio">€30</label>
  </div>
</div>
0 голосов
/ 15 октября 2018

Вам необходимо прослушать радиостанцию ​​payment_type, т. Е. ':radio[name=payment_type]'. На данный момент вы слушаете только событие change одного радиостанции.т.е. #payment_type

$(function () {
    $(':radio[name=payment_type]').change(function () {
        //Rest of your code
    });
});


$(function() {


  $(':radio[name=payment_type]').change(function() {
    //Rest of your code
    $('#amount').toggle(this.value == 'paid')
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Session Type" class="col-lg-2 control-label">Session Type</label>
  <div class="col-lg-10">
    <label class="radio-inline">
      <input type="radio" name="payment_type" value="free"/>
                  Free
    </label>

    <label class="radio-inline">
      <input type="radio" name="payment_type" value="paid" />
           Paid
      </label>
  </div>
</div>

<div class="form-group">
  <label id="amount" class="col-lg-2 control-label">Amount</label>
</div>
...