Question

我在我的Rails表单中的复选框上隐藏默认标签时遇到问题。我有一个自定义标签，无论我尝试什么，我总是得到列名称。我也试图使用这个复选框，不仅是一个模型提交，而是触发一个div hide / show事件，我似乎无法使其工作。

<div class="form-group">
    <label class="col-sm-4 control-label">Minor?:</label>
    <div class="col-sm-8">
        <%= f.check_box :minor %>
    </div>
</div>

这是我的hide / show js

<script type="text/javascript">
  var checkbox = document.getElementById('customers_minor');
  var details_div = document.getElementById('minor_details');
  checkbox.onchange = function() {
     if(this.checked) {
       details_div.style['display'] = 'block';
     } else {
       details_div.style['display'] = 'none';
     }
  };
</script>

EDIT /解我已经想出了如何通过将do添加到标签行来添加自定义标签。 <%= f.check_box :minor do %>Custom Label<% end %>

<label for="customer_minor">
    <input name="customer[minor]" type="hidden" value="0">
    <input id="customer_minor" name="customer[minor]" type="checkbox" value="1">
Custom Label
</label>

Answer 1

id属性的值实际为customer_minor，而不是customers_minor（单数与复数）。

此外，该复选框不会对onchange事件做出反应，因为其值不会更改。您应该使用onclick事件;这也适用于键盘触发的事件（即使用tab来聚焦和按空格）。

Answer 2

hide / show JS可以像这样解决：

#app/assets/javascripts/application.js
var checkbox    = document.getElementById('customer_minor');
var details_div = document.getElementById('minor_details');

checkbox.onchange = function() {
   if(this.checked) {
     details_div.style['display'] = 'block';
   } else {
     details_div.style['display'] = 'none';
   }
};

您的id似乎不正确（您可以see working JSFiddle here）。

-

您还应确保将JS放入资产管道文件 - app/assets/javascripts/application.js等。

Rails f.check_box隐藏/显示JS

2 个答案: