html - Rails 复选框和 field_with_errors 问题

Question

哟!所以我遇到了一个问题，我已经缩小到这个范围。我正在使用自定义 Bootstrap 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 单击。这样做似乎有点奇怪。我想了解为什么会发生这种情况以及 Bootstrap 自定义复选框的工作原理。如果有人有任何洞察力，那会生病。

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 规则可能存在问题。无论哪种方式，这都是我的解决方案。