Rails - 想要显示textfields / select_tags并仅启用复选框

时间:2016-04-08 08:42:02

标签: javascript html ruby-on-rails checkbox

我有5个字段,它们应该是灰色的(禁用)。如果勾选复选框,则只能编辑它们。我怎样才能解决这个问题 ?

这是我的观点:

<%= form_tag({ :controller => 'orders', :action => 'submit_customer_settings' }, :method => 'post', :name => 'submit_customer_settings', :class => "row") do %>

      <table>
          <tr>
              <td class="col-lg-2" id ="customer_service_customer"  name=customer_service disabled="true"><%= select_tag(:customer_service_customer_id, options_from_collection_for_select(@customer_service_customers, 'id', 'name', params[:customer_service_customer_id].to_i), :class => "form-control input-sm") %></td>
              <td class="col-lg-2" id ="customer_service_project"  name=customer_service disabled="true"><%= select_tag(:customer_service_project_id, options_from_collection_for_select(@customer_service_projects, 'id', 'identifier', params[:customer_service_project_id].to_i), :class => "form-control input-sm") %></td>
              <td class="col-lg-2" id ="topic"  name=customer_service disabled="true"><%= text_field_tag :topic,  params[:topic], :class => "form-control input-sm"%></td> 

              <td>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              <input id="enable" type="checkbox" /> Enable
              </td>          

              <td class="col-lg-2" style="text-align: left;"><%= submit_tag t("next"), :class => "btn btn-primary"%></td>
              <td class="col-lg-2" ></td>
          </tr>
      </table>

      <br/>
      <div style="height:80px"></div>
    <%end%>

和Javascript:

 $(function () {
    var $checkbox = $('[id^="enable"]'),
        $select = $('#customer_service_customer');
        $select = $('#customer_service_project');
        $select = $('#topic');


    $checkbox.change(function (e) {
        $select.prop('disabled', !$checkbox.is(':checked'));
    });
  });

1 个答案:

答案 0 :(得分:1)

您的javascript会在td上应用disabled属性,而不会在select元素上应用$(function () { var $checkbox = $('[id^="enable"]'), $select = $('#customer_service_customer select'); $select = $('#customer_service_project select'); $select = $('#topic select'); $checkbox.change(function (e) { $select.prop('disabled', !$checkbox.is(':checked')); }); }); 属性。这应该有效:

http://mywebiste.com/controller/method?paramter1=32234&parameter2=35734