如果选中则禁用表单

Question

我有这些代码：

<div class="nested-fields">
  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <%= f.input :start_work, as: :date, start_year: Date.today.year - 20,
                                            end_year: Date.today.year, ignore_day: true,
                                            order: [:month, :year],
                                            input_html: { class: 'form-control' },
                                            label: 'Start work period' %>
      </div>

      <div class="form-group">
        <%= f.input :is_current, label: 'Currently work here', input_html: { class: 'current' } %>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="form-group">
        <%= f.input :end_work, input_html: {class: 'end_work'}, as: :date, start_year: Date.today.year - 20,
                                            end_year: Date.today.year, ignore_day: true,
                                            order: [:month, :year],
                                            input_html: { class: 'form-control' },
                                            label: 'End work period' %>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    // experience current work
    $(".current").each(function() {
      $(this).click(function() {
        var isCurrent = $(this).prop("checked");
        if (isCurrent == true) {
          $(this).closest('.form-group').next('.form-group').find('.end_work').prop("disabled", "disabled");
        }
        else {
          $(this).closest('.form-group').next('.form-group').find('.end_work').prop("disabled", false);
        }
      });
    });
  });
</script>

但是，当当前框被选中时，我无法禁用我的 end_work 输入。我想我错过了 class 或 Javascript 上的目标。任何帮助都会很棒！

Answer 1

$(this).closest('.form-group').next('.form-group') 并不像您想象的那样。 div.form-group 在 DOM 中不是兄弟姐妹，所以，如果我没记错的话，.next('.form-group') 将找不到任何东西。

尝试$(this).closest('.col-sm-4').next('.col-sm-4').find('.end_work')。

顺便说一句，这段代码是多余的：

$(".current").each(function() {
  $(this).click(function() {
    ...

... 因为 .click 已经将点击处理程序附加到与选择器匹配的每个元素。您只需一行即可完成同样的事情：

$(".current").click(function() {
  ...

如果选中则禁用表单

If checked then disabled form

javascript

forms

ruby-on-rails

simple-form