I'm removing the disabled class from Next step button, when both radio button are checked, it's working fine but the problem is when i reload the page,both radio button remain checked but the disabled class on Next step not triggering. Is there anyway to make it work 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');
    }
 });

Can anyone help?

I'm removing the disabled class from Next step button, when both radio button are checked, it's working fine but the problem is when i reload the page,both radio button remain checked but the disabled class on Next step not triggering. Is there anyway to make it work 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');
    }
 });

Can anyone help?

• javascript
• jquery
• html

• Using php i'm setting the one of the radio button as selected. – Zain Commented Dec 27, 2017 at 15:11

3 Answers 3

You could define the check function then call it in the ready function and also when you attach your change event like :

$(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./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>

Just trigger your change handler after your page has finished loading with the .trigger() function :

$("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./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>

Yes, it is quite simple.

Make a method and call it as a first method to check the status of radio buttons as checked or not, then add class. The reason is why you are not having a desired result on refresh as you have just handled the logic inside onChange() of radio buttons.

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

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