Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

Question

Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.

jQuery(document).ready(function() {
  jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
    if (jQuery(this).val() == 'true' ) {
      jQuery('#denied-quote-one').hide();
    } else {
      jQuery('#denied-quote-one').show();
   }
  });
});

UPDATE - HTML OUTPUT OF RADIO BUTTONS:

<div class="form-group radio_buttons optional user_nurse_qualified">
   <input type="hidden" name="user[nurse_attributes][qualified]" value="">
     <span class="radio">
        <label for="user_nurse_attributes_qualified_true">
            <input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
        </label>
      </span>
      <span class="radio">
        <label for="user_nurse_attributes_qualified_false">
           <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
        </label>
       </span>
   </div>

  <div id="denied-quote-one" style="display: block;">
    <p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
    </p>
  </div>

Answer 1

Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.

Note: To prevent flickering, give the element an initial style of display: none .

 jQuery(document).ready(function() { if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) { jQuery('#denied-quote-one').show(); } jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() { if (jQuery(this).val() == 'true' ) { jQuery('#denied-quote-one').hide(); } else { jQuery('#denied-quote-one').show(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group radio_buttons optional user_nurse_qualified"> <input type="hidden" name="user[nurse_attributes][qualified]" value=""> <span class="radio"> <label for="user_nurse_attributes_qualified_true"> <input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes </label> </span> <span class="radio"> <label for="user_nurse_attributes_qualified_false"> <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No </label> </span> </div> <div id="denied-quote-one" style="display: none;"> <p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward. </p> </div>