CODEWITHSUNDEEP
javascriptjqueryhtml
Zain
Zain

Reputation: 662

jQuery detect if radio button is selected on load

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?

Upvotes: 5

Views: 2843

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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

Upvotes: 2

mfaisalhyder
mfaisalhyder

Reputation: 2284

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

Upvotes: 0

Zenoo
Zenoo

Reputation: 12880

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

Upvotes: 2

Related Questions