Как я могу повторно отобразить второе условно скрытое <div>при изменении первого условия?

Question

У меня есть два вопроса в форме с переключателями для Option1 и Option2, и я использую jQuery, чтобы показать / скрыть дополнительные вопросы в скрытых элементах <div>. Если вы ответите «Да» на Вариант 1, появится первое условное <div> с дополнительным вопросом о Варианте 2. Если ответ на Вариант 2 - «Да», то появится второе условное <div> с дополнительными вопросами.

Если пользователь изменяет вопрос Варианта 1 на «Нет» после выбора «Да», я скрою второе условное <div>. Однако, если пользователь снова выбирает «Да» для варианта 1, ответ для варианта 2 остается «Да», но второе условное условие <div> не отображается, потому что нет события change - пользователю придется выбрать « Нет, затем снова «Да», чтобы показать второе условное выражение <div>.

Я не уверен, как с этим справиться с помощью кода, нужно ли мне пытаться сбросить состояние переключателя или обработать его в каком-то другом мода. Любые советы приветствуются.

Вот мой jQuery код для условий отображения / скрытия:

<script type="text/javascript">
    $(document).ready(function () {
        $("input[name='Option1']").on ( "change", function() {

            if (this.value == "Yes") {
                $('#option1Display, #option1Display input').show().removeAttr("disabled");
            }
            else {
                $('#option1Display, #option1Display input,\
                #option2Display, #option2Display input').hide().attr("disabled", "disabled");
            }
    });
        $("#option1Display, #option1Display input").hide().attr("disabled", "disabled");
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("input[name='Option2']").on ( "change", function() {

            if (this.value == "Yes") {
                $('#option2Display, #option2Display input').show().removeAttr("disabled");
            }
            else {
                $('#option2Display, #option2Display input').hide().attr("disabled", "disabled");
            }
    });
        $("#option2Display, #option2Display input").hide().attr("disabled", "disabled");
    });
</script>

РЕДАКТИРОВАТЬ: Извините, моя разметка выполняется через CMS, которая производит много элементов <div> с различными классами CSS, но я попытаюсь воспроизвести приведенную ниже разметку с помощью:

<div>
<label>Option 1 Question</label>
<ol>
    <li>   
        <label>
            <input name="Option1" type="radio" value="No">
            No
        </label>
    </li>
    <li>   
        <label>
            <input name="Option1" type="radio" value="Yes">
            Yes
        </label>
    </li>
</ol>
</div>
<div id="option1Display"><!--jQuery inserts disabled="disabled" and style="display: none;" into <div>-->
<label>Option 2 Question</label>
<ol>
    <li>   
        <label>
            <input name="Option2" type="radio" value="No"><!--jQuery inserts disabled="disabled" and style="display: none;" into <input>-->
            No
        </label>
    </li>
    <li>   
        <label>
            <input name="Option2" type="radio" value="Yes"><!--jQuery inserts disabled="disabled" and style="display: none;" into <input>-->
            Yes
        </label>
    </li>
</ol>
</div>
<div id="option2Display"><!--jQuery inserts disabled="disabled" and style="display: none;" into <div>-->
<!--Additional questions-->
</div>

Шаги для вопросов:

1. Пользователь выбирает «Да» для Option1.
2. option1Display отображается пользователю с Option2 вопросом.
3. Пользователь выбирает «Да» для Option2.
4. option2Display отображается пользователю с дополнительными вопросами.
5. Если пользователь меняет свой ответ для Option1 на «Нет», оба option1Display и option2Display скрываются.
6. Предположим, что пользователь никогда не менял свой ответ для Option2 обратно на «Нет», поэтому «Да» по-прежнему выбрано, хотя option2Display теперь снова скрыт.
7. Если пользователь теперь снова меняет свой ответ на Option1 обратно на «Да ", option1Display отображается, и ответ на Option2 -" Да "; однако option2Display по-прежнему скрыт, если пользователь не изменит свой ответ обратно на «Нет», а затем на «Да».

Я бы хотел обработать это правильно. Надеюсь, это понятно. Извините, если это не так, я не программист по профессии и все еще изучаю этот материал. Заранее спасибо.

Answer 1

Можно отобразить option2Display, когда пользователь переключает между Да и Нет для варианта 1, проверив значение параметра 2 при изменении варианта 1. Обратите внимание, что я сделал еще две корректировки в коде: только * 1002 Элементы * и #option2Display отображаются и скрываются, поскольку нет необходимости также показывать и скрывать содержащиеся в них элементы ввода, и только входы отключены и включены, потому что атрибут disabled предназначен для элементов ввода, а не, например, а <div>. Обратите внимание, что также необязательно использовать отдельные обработчики $(document).ready() для каждого события click() и отдельный тег скрипта, все может принадлежать одному событию $(document).ready().

  $(document).ready(function() {
    $("input[name='Option1']").on("change", function() {
      if (this.value == "Yes") {
        $('#option1Display').show();
        $('#option1Display input').removeAttr("disabled");
        if ($("input[name='Option2']:checked").val() == "Yes") {
          $('#option2Display').show();
          $('#option2Display input').removeAttr("disabled");
        }
      } else {
        $('#option1Display, #option2Display').hide();
        $('#option1Display input, #option2Display input').attr("disabled", "disabled");
      }
    });
    $("#option1Display").hide();
    $("#option1Display input").attr("disabled", "disabled");

    $("input[name='Option2']").on("change", function() {
      if (this.value == "Yes") {
        $('#option2Display').show();
        $('#option2Display input').removeAttr("disabled");
      } else {
        $('#option2Display').hide();
        $('#option2Display input').attr("disabled", "disabled");
      }
    });
    $("#option2Display").hide();
    $("#option2Display input").attr("disabled", "disabled");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>Option 1 Question</label>
  <ol>
    <li>
      <label>
        <input name="Option1" type="radio" value="No">
        No
      </label>
    </li>
    <li>
      <label>
        <input name="Option1" type="radio" value="Yes">
        Yes
      </label>
    </li>
  </ol>
</div>
<div id="option1Display">
  <label>Option 2 Question</label>
  <ol>
    <li>
      <label>
        <input name="Option2" type="radio" value="No">
        No
      </label>
    </li>
    <li>
      <label>
        <input name="Option2" type="radio" value="Yes">
        Yes
      </label>
    </li>
  </ol>
</div>
<div id="option2Display">option2Display
</div>