javascript - Rails - 想要将文本字段/select_tags 灰显并仅通过复选框启用

Question

我有 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'));
    });
  });

Answer 1

您的 JavaScript 将 disabled 属性应用于 td，而不是 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'));
    });
});