Question

我在页面上有两种表单，它们的输入几乎相同。我在屏幕上的选项卡可以在每种形式之间切换。但是，当我提交其中一种表格时，我在另一种表格的相同输入字段上收到“不能空白”。我了解为什么会这样。我试图通过使用if语句仅根据单击哪个选项卡来呈现两种形式来阻止这种情况。这无法正常工作，因为您无法在if语句中定位html id。然后我尝试使用javascript，根据所单击的选项卡，它使用了“显示”和“隐藏”方法，这也没有用，因为我相信即使表单仍处于隐藏状态，它实际上仍然存在。现在我不知道该怎么办。我唯一的想法是在javascript中呈现表单？

 <input id="tab1" type="radio" name="tabs" checked>
  <label class="label-header" for="tab1"> UK Address</label>

  <input id="tab2" type="radio" name="tabs">
  <label class="label-header"for="tab2"> International Address </label>

  <!-- <section id="content1"> -->
    <%# if  %>
        <%= f.simple_fields_for :address do |fields| %>
        <%# raise %>
            <section id="content1">
                <%= render "address/fields", fields: fields, addressable: addressable %>
            </section>
        <% end %>
      <%# else %>
        <%= f.simple_fields_for :address do |fields| %>
            <section id="content2">
                <%= render "address/international_fields", fields: fields, addressable: addressable %>
            </section>
        <% end %>


$(document).ready(function() {
  var uk_address = $('#content1');
  var international_address = $('#content2');
  $('#tab1').on('click', function() {
    uk_address.show();
    international_address.hide();
  });

  $('#tab2').on('click', function() {
    uk_address.hide();
    international_address.show();
  });

});

Answer 1

通过此修改，您应该能够启用/禁用javascript中的项目：

 $(document).ready(function() {
   var uk_address = $('#content1');
   var international_address = $('#content2');
   $('#tab1').on('click', function() {
     uk_address.removeAttr("disabled").show();
     international_address.attr("disabled", "disabled").hide();
   });

   $('#tab2').on('click', function() {
     uk_address.attr("disabled", "disabled").hide();
     international_address.removeAttr("disabled").show();
   });

 });

如何在JavaScript中呈现局部

1 个答案: