javascript - 如何在 javascript 中渲染部分内容

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();
   });

 });