Question

Y！因此，我遇到了一个问题，并且将其范围缩小了。我正在使用自定义引导程序checkbox。工作正常。除了。当我单击提交而不进行检查并收到错误消息时，它不会让我单击复选框并尝试再次提交。我将问题缩小为div field_with_errors环绕在我的复选框输入和标签周围，因此我的标签不再看到该复选框输入，因此不允许我对其进行检查。

所以我的问题是有人遇到过这个问题，您是怎么解决的？任何建议都会很棒。我不想对hacky做任何事情。

这是有问题的代码。

<div class="form-row mt-5">
  <div class="custom-control custom-checkbox">
      <%= f.check_box :iarf_consent, class: 'custom-control-input', id: 'allocation_consent_iarf_consent' %>
      <%= f.label :iarf_consent, "I have read and agree with the Terms and Conditions", class: "custom-control-label", id: 'allocation_consent_iarf_consent'%>
  </div>
</div>

这是html处理错误消息后的样子

<div class="custom-control custom-checkbox">
   <input name="allocation_consent[iarf_consent]" type="hidden" value="0">
   <div class="field_with_errors">
      <input class="custom-control-input" id="allocation_consent_iarf_consent" type="checkbox" value="1" name="allocation_consent[iarf_consent]">
   </div>

   <div class="field_with_errors">
       <label class="custom-control-label" id="allocation_consent_iarf_consent" for="allocation_consent_iarf_consent">I have read and agree with the Terms and Conditions
       </label>
   </div>
</div>

为清楚起见，我通过在复选框和标签周围添加div并缩小了范围，从而发现无法再单击自定义复选框，从而缩小了问题的范围。感谢您的帮助。

更新：

我进一步缩小了范围。似乎单击标签即可完成其工作。只是看不到它。使用一些JS，我可以看到单击标签实际上会选中该复选框，只是在使用的自定义复选框上不可见。我想我可以欺骗它以显示一些jquery单击。似乎有点奇怪。我想了解为什么会这样，以及引导程序自定义复选框的工作方式。如果有人有任何见识会感到不适。

Answer 1

这最终是我解决该问题的方法。

var mergeFieldWithErrorsForCustomCheckbox = function () {
  var fields = $('.custom-checkbox .field_with_errors');
  fields.first().append(fields.not(':first').children())
  fields.not(":first").remove();
}

我刚刚合并了两个field_with_errors div，因此复选框可以使用。我的直觉告诉我，我们现有的类和CSS规则可能存在问题。无论哪种方式，这都是我的解决方案。

Answer 2

您可以使用初始化程序禁用.field_with_errors生成：

# config/initializers/field-with_errors.rb
# Disable field_with_errors entirely

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html_tag
end

Rails复选框和field_with_errors问题

2 个答案: