如果選中，那麼禁用形式

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 s不是DOM中的兄弟，所以如果我沒有弄錯，.next('.form-group')將無法​​找到任何東西。

嘗試$(this).closest('.col-sm-4').next('.col-sm-4').find('.end_work')。

---

順便說一句，這個代碼是多餘的：

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

...因爲.click已經attachs一個單擊處理由選擇匹配的每一個元素。你可以用一條線完成同樣的事情：

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