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输入。我想我错过了目标类或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() {
  ...

如果选中，则禁用表单

1 个答案: