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单选按钮的值，并根据该值显示/隐藏。

注意：为防止闪烁，请为show / hide元素指定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>

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

1 个答案: