根据属性值显示/隐藏div（复选框值）

Question

是否有任何可用的辅助方法显示/隐藏基于模型属性值的指定div？

这里是我想要显示包含openid_domain_name文本字段的部分，如果openid_enabled是true，并且在编辑记录时另外隐藏。

<%= form_for @application do |f| %> 
    <%= render "shared/error_messages", target: @application %> 
    <p> 
     <%= f.label :name %> 
     <%= f.text_field :name %> 
    </p> 
    <p> 
     <%= f.label :description %> 
     <%= f.text_field :description %> 
    </p> 
    <p> 
     <%= f.check_box :openid_enabled %> 
     <%= f.label 'openid', 'OpenID' %> 
     <div id="application_openid_domain" style="display: none;"> 
     <%= f.label :openid_domain_name %> 
     <%= f.text_field :openid_domain_name %> 
     </div> 
    </p> 
    <p><%= f.submit class: "btn btn-primary" %></p> 
<% end %> 

这是当用户选中/取消选中复选框时显示/隐藏div的javascript。

<script type="text/javascript"> 
    $(function() { 
     $(':checkbox').click(function() { 
      if ($(this).is(':checked')) 
      $("#application_openid_domain").show(); 
      else 
      $("#application_openid_domain").hide();    
     }); 
    }); 
</script> 

EDITED 生成的HTML源代码：

<form accept-charset="UTF-8" action="/applications" class="new_application" id="new_application" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Cq2rYF1qkjnsobimMTAUvle9Hi82LwdvghcVWRtC/I0=" /></div> 
    <p> 
    <label for="application_name">Name</label> 
    <input id="application_name" name="application[name]" size="30" type="text" /> 
    </p> 
    <p> 
    <label for="application_description">Description</label> 
    <input id="application_description" name="application[description]" size="30" type="text" /> 
    </p> 
    <p> 
    <input name="application[openid_enabled]" type="hidden" value="0" /><input id="application_openid_enabled" name="application[openid_enabled]" type="checkbox" value="1" /> 
    <label for="application_openid">OpenID</label> 
    <div id="application_openid_domain" style="display: none;"> 
     <label for="application_openid_domain_name">Openid domain name</label> 
     <input id="application_openid_domain_name" name="application[openid_domain_name]" size="30" type="text" /> 
    </div> 
    </p> 
    <p><input class="btn btn-primary" name="commit" type="submit" value="Create Application" /></p> 
</form> 

<script type="text/javascript"> 
    $(function() { 
     $(':checkbox').click(function() { 
      if ($(this).is(':checked')) 
      $("#application_openid_domain").show(); 
      else 
      $("#application_openid_domain").hide();    
     }); 
    }); 
</script> 

Answer 1

我已经写了自定义的助手做同样的。请建议，如果它是正确的解决方案或不。

应用程序/帮手/ application_helper.rb

def show_hide(show) 
    show ? 'block' : 'none' 
end 

应用程序/视图/应用/ _form.html.erb

<div id="application_openid_domain" style="display: <%= show_hide(@application.openid_enabled?)%>;"> 
    <%= f.label :openid_domain_name %> 
    <%= f.text_field :openid_domain_name %> 
</div> 

Answer 2

可以使用jQuery.toggle()功能。

HTML：

​<div id="div">123</div> 
<input type="checkbox" vlalue="show-hide" checked="checked" id="box"> 

的JavaScript：

$('#box').change(function() { 
    $('#div').toggle(this.checked); 
}); 

DEMO