如何使用jquery将数据传递/阻止到表单中

Question

我目前正在尝试建立一些帖子。它们可以与（文件，任务，事件）相关联。所以我在每个这个附件中为我的new_post_form创建了一个部分。

所以我的问题是如果关闭附件的形式如何阻止数据？

如果你想看一个真实的例子，我把我需要的那种数据放到那个表格中

New_post_form：

<!-- New Post (modal) -->
<%= simple_form_for(Post.new) do |f| %>
  <div id='MyNewPost' class='modal fade' role='dialog' aria-hidden="true">
    <div class="modal-dialog" style="width:400px;">
      <div class='content'>
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3 class="modal-title">Nouveau post</h3>
        </div>
        <div class="modal-body">
          <div class="form-inputs">
            <h4>Votre message :</h4>
            <%= f.input :content, label: false%>
          </div>
          <hr>
          <div class="post_attachement">
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Document" id="file_btn">
              <i class="fa fa-file-o" aria-hidden="true"></i>
            </div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tâche" id="task_btn">
              <i class="fa fa-thumb-tack" aria-hidden="true"></i>
            </div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Evenement" id="event_btn">
              <i class="fa fa-calendar" aria-hidden="true"></i>
            </div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Cloud" id="cloud_btn">
              <i class="fa fa-cloud" aria-hidden="true"></i>
            </div>
          </div>
          <div class="form-inputs">
            <div id="file_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 1 %>
              Form for new file 
            </div>
            <div id="task_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 2 %>
              Form for new task
            </div>
            <div id="event_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 3 %>
              Form for new event
            </div>
            <div id="cloud_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 4 %>
              Form for new cloud
            </div>
          </div>
        </div>
        <%= f.hidden_field :group_id, :value => @group.id %>
        <div class='modal-footer'>
          <div class="btn btn-default pull-left">
            Annuler
          </div>
          <%= f.button :submit, "Créer le post", class: "btn btn-success pull-right" %>
        </div>
      </div>
    </div>
  </div>
<% end %>
<!-- /New Post (modal) -->

用于打开/关闭form_attached的Jquery脚本：

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#file_attach').hide();
  jQuery('#file_btn').on('click', function (event) {
  jQuery('#task_attach').hide();
  jQuery('#event_attach').hide();
  jQuery('#cloud_attach').hide();
  jQuery('#file_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#task_attach').hide();
  jQuery('#task_btn').on('click', function (event) {
  jQuery('#file_attach').hide();
  jQuery('#event_attach').hide();
  jQuery('#cloud_attach').hide();
  jQuery('#task_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#event_attach').hide();
  jQuery('#event_btn').on('click', function (event) {
  jQuery('#task_attach').hide();
  jQuery('#file_attach').hide();
  jQuery('#cloud_attach').hide();
  jQuery('#event_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#cloud_attach').hide();
  jQuery('#cloud_btn').on('click', function (event) {
  jQuery('#task_attach').hide();
  jQuery('#event_attach').hide();
  jQuery('#file_attach').hide();
  jQuery('#cloud_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

Answer 1

花絮：

• 您可以将disabled="true"添加到输入元素中。
  • 当＆＃34;禁用＆＃34;时，它不会作为表单提交的一部分发送。

解决方案：

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#file_attach').hide();
    jQuery('#file_btn').on('click', function (event) {
      jQuery('#task_attach').hide();
      jQuery('#task_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').hide();
      jQuery('#event_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').hide();
      jQuery('#cloud_attach').find(':input').attr('disabled', true);
      jQuery('#file_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#task_attach').hide();
    jQuery('#task_btn').on('click', function (event) {
      jQuery('#file_attach').hide();
      jQuery('#file_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').hide();
      jQuery('#event_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').hide();
      jQuery('#cloud_attach').find(':input').attr('disabled', true);
      jQuery('#task_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#event_attach').hide();
    jQuery('#event_btn').on('click', function (event) {
      jQuery('#task_attach').hide();
      jQuery('#task_attach').find(':input').attr('disabled', true);
      jQuery('#file_attach').hide();
      jQuery('#file_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').hide();
      jQuery('#cloud_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#cloud_attach').hide();
    jQuery('#cloud_btn').on('click', function (event) {
      jQuery('#task_attach').hide();
      jQuery('#task_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').hide();
      jQuery('#event_attach').find(':input').attr('disabled', true);
      jQuery('#file_attach').hide();
      jQuery('#file_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

说明：

• ELEMENT.find(':input')在ELEMENT中找到所有输入（textarea，input，select）
• ELEMENT.attr('disabled', true)将属性disabled="true"设置为ELEMENT

建议：

• 可能重构上面的代码，以删除每个可点击操作的重复功能，尤其是现在还有其他代码.attr('disabled', true)