jQuery, отметьте переключатель и отметьте других как отключенные

Question

Я работаю над пользовательской формой.Вверху есть 4 переключателя, один из которых помечен checked по умолчанию.На основании этих значений переключателей другие переключатели будут доступны или недоступны в другой части формы.У меня есть одна последняя проблема: если кто-то проверил поле метода, отличное от «по умолчанию», а затем проверил поле интервала, отличное от «один раз», я хочу, чтобы поле метода вернулось к «по умолчанию».

Я знаю, что .attr('checked', 'checked'); - это способ проверки поля, но не знаю, как лучше всего реализовать его с моим кодом.

Вот пример:

<form>
  <p>
    <input type="radio" name="interval" value="once" checked> Once
    <input type="radio" name="interval" value="weekly"> Weekly
    <input type="radio" name="interval" value="bi-weekly"> Bi-Weekly
    <input type="radio" name="interval" value="monthly"> Monthly
  </p>

  <p>
    <input type="radio" name="method" value="default" checked> Default
    <input type="radio" class="extra" name="method" value="second"> Second
    <input type="radio" class="extra" name="method" value="third"> Third
  </p>
</form>

$(document).ready(function() {
    $("input:radio[name=interval]").on("change", function () {
    if ($(this).prop("checked") && $(this).val() == 'once') $('.extra').prop('disabled', false).show();
    else $(".extra").prop('disabled', true).hide();
  });
});

Вот скрипка

Answer 1

Я добавил общие классы к методам и интервалам.Если интервал будет изменен с «один раз», он вернет метод к значению по умолчанию и включит дополнительные функции.Если он будет изменен на один раз, он включит методы.

$(document).ready(function() {
  var $intervals = $('.interval');
  var $methods = $('.method');

  $intervals.on('change', function() {
    if (this.value !== 'once') {
      $methods.not('.extra').prop('checked', true);
    }

    $methods.filter('.extra').prop('disabled', this.value !== 'once');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="radio" name="interval" class="interval" value="once" checked> Once
    <input type="radio" name="interval" class="interval" value="weekly"> Weekly
    <input type="radio" name="interval" class="interval" value="bi-weekly"> Bi-Weekly
    <input type="radio" name="interval" class="interval" value="monthly"> Monthly
  </p>

  <p>
    <input type="radio" class="method" name="method" value="default" checked> Default
    <input type="radio" class="method extra" name="method" value="second"> Second
    <input type="radio" class="method extra" name="method" value="third"> Third
  </p>
</form>

Answer 2

Вы можете использовать ниже код

    $(document).ready(function() {
        $("input:radio[name=interval]").on("change", function () {
        if ($(this).prop("checked") && $(this).val() != 'once') 
        {
           $('.extra').attr('disabled', false).show();
           $('input[value="default"]').prop('checked', true);
        }
        else $(".extra").attr('disabled', true).hide();
     });
  });