Как переключить видимость одного div с двумя разными событиями щелчка, основанными на переменной?

Question

У меня есть форма с 3 элементами (элементы A, B, C, скажем, форма для оформления заказа).

Два из них A и B являются физическими элементами (коллекция адресов доставки), а один - цифровым (без доставки и без темы)

Я хочу расширить форму на основе выбора таким образом, чтобы, когда пользователь выбирает A, B или оба, отображается кнопка, ведущая к следующему шагу формы, иКнопка отправки скрыта.

Я пробовал какой-то код, который работал, если выбраны A или B, но, поскольку я использую .toggle, очевидно, если A уже выбран (и отображается кнопка Next), и вы выбираетеB, он будет переключаться между ними.

<input type="radio" name="choice" id="itemA" checked>A (physical)</input>
<input type="radio" name="choice" id="itemB">B (physical</input>
<input type="radio" name="choice" id="itemC">C (digital)</input>

<input name="order-button" id="order-button" type="submit" />
<input name="next" id="next" type="button" />

<script>
$(document).ready(function () {
    $('#itemA').change(function () {
      $('#next').toggle('slow');
      $('#order-button').toggle('slow');
    })

    $('#itemB').change(function () {
      $('#next').toggle('slow');
      $('#order-button').toggle('slow');
    })
});
</script>

Итак, как мне переключать кнопки соответственно, если отмечены либо A, B, либо оба элемента? (При выборе A B никогда не должен переключаться и наоборот)

Заранее спасибо

Answer 1

Вам понадобится переменная, в которой хранится текущее состояние вашей формы:

$(document).ready(function () {
    // Assuming the default option is A or B, we want to show the #next button
    var showNextButton = true; 

    $('#itemA, #itemB').change(function () {
      // Only trigger toggles if #next was hidden
      if (!showNextButton) {
        $('#next').toggle('slow');
        $('#order-button').toggle('slow');
        showNextButton = true;
      }
    });

    $('#itemC').change(function () {
      // Only trigger toggles if #next was visible
      if (showNextButton) {
        $('#next').toggle('slow');
        $('#order-button').toggle('slow');
        showNextButton = false;
      }
    });
});