jQuery 检测单选按钮是否在加载时被选中

Question

我正在从“下一步”按钮中删除禁用的类，当选中两个单选按钮时，它工作正常，但问题是当我重新加载页面时，两个单选按钮仍保持选中状态，但“下一步”上的禁用类未触发。有什么办法可以让它在负载下工作吗？

<input class="SelectMarital" id="marital1" type="radio" name="marital" value="1"/> 
<input class="SelectMarital" id="marital2" type="radio" name="marital" value="2"/> 

<input class="SelectPrice" id="price1" type="radio" name="price" value="1"/> 
<input class="SelectPrice" id="price2" type="radio" name="price" value="2"/>

<a href="#" id="salary" class="btn disabled">Next Step</a>

$("input[type=radio]").change(function(){
    if($('.SelectMarital').is(':checked') && $('.SelectPrice').is(':checked'))  {
        $("#salary").removeClass('disabled');
    }else {
        $("#salary").addClass('disabled');
    }
 });

有人可以帮忙吗？

Answer 1

您可以定义检查函数，然后在就绪函数中调用它，也可以在附加change事件时调用它，例如：

$(function(){
    //First call for the load
    checkRadioButtons(); 

    //Second call for change event
    $("input[type=radio]").change( checkRadioButtons ); 
});

$(function(){
    //First call for the load
    checkRadioButtons(); 

    //Second call for change event
    $("input[type=radio]").change( checkRadioButtons ); 
});

$(function() {
  checkRadioButtons();
  $("input[type=radio]").change(checkRadioButtons);
});

var checkRadioButtons = function() {
  if ($('.SelectMarital').is(':checked') && $('.SelectPrice').is(':checked')) {
    $("#salary").removeClass('disabled');
  } else {
    $("#salary").addClass('disabled');
  }
}