Question

我正在从下一步按钮中删除已禁用的类，当两个单选按钮都被选中时，它工作正常但问题是当我重新加载页面时，两个单选按钮都保持选中但下一步的禁用类不会触发。反正有没有让它工作onload？

<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功能后，只需触发.trigger()处理程序：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

是的，这很简单。

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

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

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

jQuery检测加载时是否选择了单选按钮

3 个答案: