javascript - 禁用 Rails 应用程序中复选框的输入

Question

我的 Rails 应用程序的表单上有一个日期输入下拉列表。

我希望有一个复选框 - 当用户选中/选择时 - 将 (#1) 禁用日期输入并 (#2) 使用当前日期填充日期输入。

我查看了之前的答案，以了解如何做到这一点，这就是我试图完成的#1:

app/assets/javascripts/application.js

 //= require jquery
 //= require bootstrap
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .

$(document).on('change', '#availableNow', function(){
    debugger;
    if($(this).prop('checked')){
        $('#fromDatePicker').attr('disabled', 'disabled');
    } else {
        $('#fromDatePicker').removeAttr('disabled');
    }
});

以形式...

app/views/apartments/_form.html.erb

   <div class="field">
      <%= f.label :available_now %>
      <%= f.check_box :available_now, id:"availableNow" %>
    </div>
    <div class="field">
      <%= f.label :to_date %><br>
      <%= f.date_select :to_date, {:include_blank => true, :default => nil, :start_year => Date.today.year, :end_year => Date.today.year + 4, :order => [:month, :day, :year] }, id:"fromDatePicker" %>
    </div>

Rails 为日期选择器生成 3 个下拉菜单(日、月和年)。选中该框后，仅禁用月份(第一个下拉列表)。

有什么想法如何让复选框功能适用于所有下拉菜单吗？

知道如何在禁用下拉菜单后将其“灰显”吗？

提前致谢!

Answer 1

首先检查 f.check_box 生成的 html 是否可以看到 id: 'your_id'

$('#availableNow').on('click', function(){
 if($(this).prop('checked')){
  $('#fromDatePicker').attr('disabled', 'disabled');
 } else {
  $('#fromDatePicker').removeAttr('disabled');
 }
})

对于禁用月份和年份，检查生成的 select_id 并禁用它们