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

Question

当两个单选按钮都被选中时，我会从“下一步”按钮中移除“disabled”类。这样做可以正常运行，但问题是当我重新加载页面时，两个单选按钮仍保持选中状态，但“下一步”的“disabled”类没有触发。有没有办法在页面加载时使它起作用？

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

有人能帮忙吗？

- Zain

---

使用 PHP，我正在将单选按钮中的一个设置为已选择状态。 - Zain

Answer 1

使用 .trigger() 函数在页面加载完成后触发您的 change 处理程序：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="SelectMarital" id="marital1" type="radio" name="marital" value="1" checked/>
<input class="SelectMarital" id="marital2" type="radio" name="marital" value="2" />

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

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

- Zenoo

Answer 2

您可以定义一个检查函数，然后在ready函数中调用它，在附加change事件时也可以调用它：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="SelectMarital" id="marital1" type="radio" name="marital" value="1" checked/> Marital 1
<input class="SelectMarital" id="marital1" type="radio" name="marital" value="2" /> Marital 2
<br>
<input class="SelectPrice" id="price1" type="radio" name="price" value="1" checked/> Price 1
<input class="SelectPrice" id="price2" type="radio" name="price" value="2" /> Price 2
<br><br>
<a href="#" id="salary" class="btn disabled">Next Step</a>

- Zakaria Acharki

Answer 3

是的，这很简单。

创建一个方法并将其作为第一个方法调用，以检查单选按钮的状态是否被选中，然后添加类。原因是在刷新时您没有得到期望的结果，因为您只是在单选按钮的onChange()内处理了逻辑。

$(document).ready(function() {
    checkRadioButtonStatus();

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

- mfaisalhyder