0

チェックボックスとテキストフィールドを含むネストされたフォームがあります。その特定のネストされたフォームのテキストボックスがクリック/有効化された場合にのみ、テキストフィールドを有効にできるようにしたいと思います。現在、「カスタム」テキストボックスが設定されている場合、フィールドを有効/無効にするようにハードコーディングされています。JavaScriptでこれらのテキストボックス属性をその場で更新するにはどうすればよいですか？

Form.erbを今すぐ

<%= 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 %>

ここでRoRによって生成されたHTMLhttp ://jsfiddle.net/59AXJ/

4

2 に答える 2

1

これは、クリックされたチェックボックスから属性名を取得します。次に、類似した名前の入力を検索します。これらは、「無効」に切り替える入力です。

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

http://jsfiddle.net/Sbw65/<- テストしてください

于 2013-02-05T03:51:35.237 に答える
0

私が知っているように、これをその場で作成することは不可能ですが、css クラスによっていくつかの入力をいくつかのチェックボックスに接続する独自の関数を JavaScript で書くことができます。このようなもの (CoffeeScript のコード):

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)

その後、接続されたチェックボックスと入力用のクラスを追加するだけです。

于 2013-02-03T18:25:46.780 に答える