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();
  });
});

Here is a fiddle

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();
     });
  });

jQuery，检查单选按钮并标记其他人为禁用

2 个答案: