使用javascript启用/禁用嵌套表单字段

我有一个带有复选框和文本字段的嵌套表单。我希望只有在特定嵌套表单的文本框被单击/启用时，才能启用文本字段。如果设置了“自定义”文本框，则当前硬编码为启用/禁用字段。如何让javascript动态更新这些文本框属性

现在就开始

<%= simple_nested_form_for @client do |f| %>
  <%= f.fields_for :client_prices do |def_price_form| %>
  <div class="controls controls-row">
    <div class='span10'>
      <% if def_price_form.object.custom == true  %>
        <%= def_price_form.input :custom, :wrapper_html => { :class => 'span1' } %>
        <% end %>
        <%= def_price_form.input :visit_type, :wrapper_html => { :class => 'span2' } %>
        <%= def_price_form.input :price, :wrapper => :prepend, :wrapper_html => { :class => 'span2' }, :label => "Price" do %>
          <%= content_tag :span, "$", :class => "add-on" %>
          <%= def_price_form.input_field :price %>
          <%= def_price_form.link_to_remove '<i class="icon-remove"></i>'.html_safe, :class => 'btn btn-danger', :wrapper_html => { :class => 'span3 pull-left' } %>
          <%end%>
      <% else %>
        <%= def_price_form.input :custom, :hidden => false, :wrapper_html => { :class => 'span1' } %>
        <%= def_price_form.input :visit_type, disabled: true,  :wrapper_html => { :class => 'span2' } %>
        <%= def_price_form.input :price, :wrapper => :prepend, :wrapper_html => { :class => 'span2' }, :label => "Price" do %>
          <%= content_tag :span, "$", :class => "add-on" %>
          <%= def_price_form.input_field :price, disabled: true %>
          <%end%>
      <%end%>
    </div>
  </div>
  <% end %>
  <%= f.link_to_add "Add a custom price", :client_prices, :class => 'btn btn-success' %>
  <p>&nbsp;</p>
  <div class="controls">
    <%= f.button :submit, :class => 'btn btn-primary' %>
  </div>
<% end %>

{:class=>'span1'}%>
{:class=>'span2'}%>
：prepend，：wrapper_html=>{:class=>'span2'}，：label=>“Price”do%>
“附加组件”%>
'btn btn danger'，：wrapper_html=>{:class=>'span3向左拉'}%>
false，：wrapper_html=>{:class=>'span1'}%>
{:class=>'span2'}%>
：prepend，：wrapper_html=>{:class=>'span2'}，：label=>“Price”do%>
“附加组件”%>
“btn btn成功”%>

“btn btn主节点”%>

此处由RoR生成的HTML

---

正如我所知，这是不可能即时实现的，但您可以在javascript上编写一些独特的函数，通过css类将一些输入与一些复选框连接起来。类似这样的代码（CoffeeScript上的代码）：

---

之后，您只需要为连接的复选框和输入添加一些类。

这将从单击的复选框中获取属性名称。然后查找具有相似名称的输入，这些是我们将切换为“禁用”的输入

---

通过在浏览器中查看呈现页面上的源代码，提供此页面生成的HTML。这将使查看DOM变得更容易，有人可以帮助您使用正确的JS。除非你使用的是coffeescript。你说的“嵌套”是什么意思？您不能将一个

放在另一个

中。它是rails中的一个术语，您可以将一个模型中的表单“嵌套”到父模型中。

changeCheckbox: (class_value) =>
  $('[type=checkbox] '+class_value)). on 'check', (e) ->
    $input = $(e.currentTarget)
      if !$input.prop("checked")
        $("input "+class_value).prop('disabled', false)
      else
        $("input "+class_value).prop('disabled', true)

$("input[type='checkbox']").click(function () {
    var thisCheckbox = $(this);
    var id = $(this).attr("id");
    var text = $("label[for=" + id + "]").text().toLowerCase();
    var name = $(this).attr("name").replace("[" + text + "]", "");
    $("input[name*='" + name + "']").each(function () {
        var thisInput = $(this);
        if (thisInput.attr("disabled")) {
            thisInput.removeAttr("disabled");
        } else {
            thisInput.attr("disabled", "disabled");
            thisCheckbox.removeAttr("disabled");
        }
    })
});