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

我目前正试图建立一些职位。它们可以关联到（文件、任务、事件）。因此，我在我的新的post表格中为每个附件做了一个部分

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

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

新的邮政表格：

<!-- 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) -->

&时代；
新邮政
Votre消息：

正确%>
1 %>
新文件的格式
正确%>
2 %>
新任务的表格
正确%>
3 %>
新活动表格
正确%>
4 %>
新云的表单
@group.id%>
环空器

打开/关闭所附表单的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 -->

jQuery（文档）.ready（函数（）{
jQuery（'#file_attach'）.hide（）；
jQuery（'#file_btn'）。在（'click'，函数（事件）{
jQuery（'#task_attach'）.hide（）；
jQuery（'#event_attach'）.hide（）；
jQuery（'#cloud_attach'）.hide（）；
jQuery（“#文件_附件”）.toggle（）；
});
});
jQuery（文档）.ready（函数（）{
jQuery（'#task_attach'）.hide（）；
jQuery（'#task_btn'）。在（'click'，函数（事件）{
jQuery（'#file_attach'）.hide（）；
jQuery（'#event_attach'）.hide（）；
jQuery（'#cloud_attach'）.hide（）；
jQuery（“#任务_附加”）.toggle（）；
});
});
jQuery（文档）.ready（函数（）{
jQuery（'#event_attach'）.hide（）；
jQuery（'#event_btn'）。在（'click'，函数（event）{
jQuery（'#task_attach'）.hide（）；
jQuery（'#file_attach'）.hide（）；
jQuery（'#cloud_attach'）.hide（）；
jQuery（“#事件_附加”）.toggle（）；
});
});
jQuery（文档）.ready（函数（）{
jQuery（'#cloud_attach'）.hide（）；
jQuery（'#cloud_btn'）。on（'click'，函数（事件）{
jQuery（'#task_attach'）.hide（）；
jQuery（'#event_attach'）.hide（）；
jQuery（'#file_attach'）.hide（）；
jQuery（“#cloud_attach”）.toggle（）；
});
});

琐事：

• 您可以将

  disabled=“true”

  添加到输入元素中。
  • 当“禁用”时，它不会作为表单提交的一部分发送

解决方案：

jQuery（文档）.ready（函数（）{
jQuery（'#file_attach'）.hide（）；
jQuery（'#file_btn'）。在（'click'，函数（事件）{
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（“#文件_附件”）.toggle（）；
});
});
jQuery（文档）.ready（函数（）{
jQuery（'#task_attach'）.hide（）；
jQuery（'#task_btn'）。在（'click'，函数（事件）{
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（“#任务_附加”）.toggle（）；
});
});
jQuery（文档）.ready（函数（）{
jQuery（'#event_attach'）.hide（）；
jQuery（'#event_btn'）。在（'click'，函数（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（“#事件_附加”）.toggle（）；
});
});
jQuery（文档）.ready（函数（）{
jQuery（'#cloud_attach'）.hide（）；
jQuery（'#cloud_btn'）。on（'click'，函数（事件）{
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（）；
});
});

说明：

• ELEMENT.find（':input'）

  查找元素内的所有输入（textarea、input、select）

• ELEMENT.attr（'disabled'，true）

  为元素设置属性

  disabled=“true”

建议:

• 可能需要重构上面的代码，以删除每个可单击操作的重复功能，尤其是现在有了

  .attr（'disabled'，true）

<!-- 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 -->