javascript - 根据单选按钮值在页面加载时显示/隐藏 div - Jquery 和 Ruby on Rails 简单表单

Question

将 Jquery 与 Ruby on Rails 和 Simple Form Gem 结合使用，我可以在更改单选按钮时成功显示/隐藏 div，但是尽管进行了多次尝试，我还是无法在页面加载时使用它 - div 总是显示，无论单选按钮是真还是假。任何帮助都会非常感谢。

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

更新 - 单选按钮的 HTML 输出:

<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

您上面的代码为单选按钮上的 change 事件添加了一个事件处理程序。除此之外，您需要在页面加载时检查 :checked 单选按钮的值，并根据该值显示/隐藏。

注意:为防止闪烁，请为元素提供 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>