在页面加载上显示 /隐藏DIV，具体取决于单选按钮值 - jQuery和Ruby在Rails简单表单上

Question

使用jquery和ruby在轨道上和简单的表格宝石，我可以在更改单选按钮时成功显示/隐藏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>