javascript - 如果选中则禁用表单

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 的目标类(class)或其他内容。任何帮助都会很棒!

Answer 1

$(this).closest('.form-group').next('.form-group')并没有按照你的想法去做。 div.form-group s 在 DOM 中不是 sibling ，所以，如果我没记错的话，.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() {
  ...