Если отмечено, то отключите форму (многоформатная форма)

Question

У меня есть опыт, где пользователь может ввести свой рабочий опыт. Таким образом, форма является многоформатной, где пользователь может добавить столько, сколько имеет опыт.

Например, пользователь имеет два рабочий опыта, то HTML формы будет:

<div class="row"> 
    <%= f.input :start_work, as: :date, start_year: Date.today.year - 20, end_year: Date.today.year, ignore_day: true, order: [:month, :year] %><br> 
    <%= f.input :is_current, input_html: {class: 'current'} %><br> 
    <%= 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] %> 
</div> 

<div class="row"> 
    <%= f.input :start_work, as: :date, start_year: Date.today.year - 20, end_year: Date.today.year, ignore_day: true, order: [:month, :year] %><br> 
    <%= f.input :is_current, input_html: {class: 'current'} %><br> 
    <%= 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] %> 
</div> 

Таким образом, есть два элемента, которые имеют класс тока и end_work. Теперь, я хочу, чтобы так, когда пользователь проверил is_current, end_work будет отключен. Итак, я добавляю эти JS код:

$(document).ready(function() { 
    $(".current").each(function() { 
     $(this).click(function() { 
     var isCurrent = $(this).prop("checked"); 
     if (isCurrent == true) { 
      $(".end_work").prop("disabled", "disabled"); 
     } 
     else { 
      $(".end_work").prop("disabled", false); 
     } 
     }); 
    }); 
    }); 

Он должен работать так: Если я проверил первый is_current, то первое поле end_work будет отключен без ущерба для второго end_work.

Однако, это влияет на второй end_work, когда я проверил первый is_current. Я не могу изменить класс, чтобы он отличался для каждой формы, потому что форма сгенерирована с помощью драгоценного камня кокона (вложенной формы). Каково решение?

Update 1

Вот мой HTML код:

<div class="form-group boolean optional resume_experiences_is_current"> 
    <div class="checkbox"> 
    <input value="0" type="hidden" name="resume[experiences_attributes][1][is_current]"> 
    <label class="boolean optional" for="resume_experiences_attributes_1_is_current"> 
     <input class="boolean optional current" type="checkbox" value="1" checked="checked" name="resume[experiences_attributes][1][is_current]" id="resume_experiences_attributes_1_is_current">Is current 
    </label> 
    </div> 
</div> 

<div class="form-group date optional resume_experiences_end_work"><label class="date optional control-label" for="resume_experiences_attributes_1_end_work_2i">End work</label><div class="form-inline"><input type="hidden" id="resume_experiences_attributes_1_end_work_3i" name="resume[experiences_attributes][1][end_work(3i)]" value="1"> 
    <select id="resume_experiences_attributes_1_end_work_2i" name="resume[experiences_attributes][1][end_work(2i)]" class="date optional end_work form-control"> 
    <option value="1">January</option> 
    <option value="2">February</option> 
    <option value="3" selected="selected">March</option> 
    <option value="4">April</option> 
    <option value="5">May</option> 
    <option value="6">June</option> 
    <option value="7">July</option> 
    <option value="8">August</option> 
    <option value="9">September</option> 
    <option value="10">October</option> 
    <option value="11">November</option> 
    <option value="12">December</option> 
    </select> 
    <select id="resume_experiences_attributes_1_end_work_1i" name="resume[experiences_attributes][1][end_work(1i)]" class="date optional end_work form-control"> 
    <option value="1996">1996</option> 
    <option value="1997">1997</option> 
    <option value="1998">1998</option> 
    <option value="1999">1999</option> 
    <option value="2000">2000</option> 
    <option value="2001">2001</option> 
    <option value="2002">2002</option> 
    <option value="2003">2003</option> 
    <option value="2004">2004</option> 
    <option value="2005">2005</option> 
    <option value="2006">2006</option> 
    <option value="2007">2007</option> 
    <option value="2008">2008</option> 
    <option value="2009">2009</option> 
    <option value="2010">2010</option> 
    <option value="2011">2011</option> 
    <option value="2012">2012</option> 
    <option value="2013">2013</option> 
    <option value="2014">2014</option> 
    <option value="2015">2015</option> 
    <option value="2016" selected="selected">2016</option> 
    </select> 
    </div></div> 

Answer 1

Использование .next(SELECTOR) выбрать только next элемент с соответствующим checkbox

Попробуйте это:

$('.current').on('change', function() { 
 
    $(this).next('.end_work').prop('disabled', this.checked); 
 
})

Edit:

$('.current').on('change', function() { 
 
    $(this).closest('.form-group').next('.form-group').find('.end_work').prop('disabled', this.checked); 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="form-group boolean optional resume_experiences_is_current"> 
 
    <div class="checkbox"> 
 
    <input value="0" type="hidden" name="resume[experiences_attributes][1][is_current]"> 
 
    <label class="boolean optional" for="resume_experiences_attributes_1_is_current"> 
 
     <input class="boolean optional current" type="checkbox" value="1" checked="checked" name="resume[experiences_attributes][1][is_current]" id="resume_experiences_attributes_1_is_current">Is current 
 
    </label> 
 
    </div> 
 
</div> 
 

 
<div class="form-group date optional resume_experiences_end_work"> 
 
    <label class="date optional control-label" for="resume_experiences_attributes_1_end_work_2i">End work</label> 
 
    <div class="form-inline"> 
 
    <input type="hidden" id="resume_experiences_attributes_1_end_work_3i" name="resume[experiences_attributes][1][end_work(3i)]" value="1"> 
 
    <select id="resume_experiences_attributes_1_end_work_2i" name="resume[experiences_attributes][1][end_work(2i)]" class="date optional end_work form-control"> 
 
     <option value="1">January</option> 
 
     <option value="2">February</option> 
 
     <option value="3" selected="selected">March</option> 
 
     <option value="4">April</option> 
 
     <option value="5">May</option> 
 
     <option value="6">June</option> 
 
     <option value="7">July</option> 
 
     <option value="8">August</option> 
 
     <option value="9">September</option> 
 
     <option value="10">October</option> 
 
     <option value="11">November</option> 
 
     <option value="12">December</option> 
 
    </select> 
 
    <select id="resume_experiences_attributes_1_end_work_1i" name="resume[experiences_attributes][1][end_work(1i)]" class="date optional end_work form-control"> 
 
     <option value="1996">1996</option> 
 
     <option value="1997">1997</option> 
 
     <option value="1998">1998</option> 
 
     <option value="1999">1999</option> 
 
     <option value="2000">2000</option> 
 
     <option value="2001">2001</option> 
 
     <option value="2002">2002</option> 
 
     <option value="2003">2003</option> 
 
     <option value="2004">2004</option> 
 
     <option value="2005">2005</option> 
 
     <option value="2006">2006</option> 
 
     <option value="2007">2007</option> 
 
     <option value="2008">2008</option> 
 
     <option value="2009">2009</option> 
 
     <option value="2010">2010</option> 
 
     <option value="2011">2011</option> 
 
     <option value="2012">2012</option> 
 
     <option value="2013">2013</option> 
 
     <option value="2014">2014</option> 
 
     <option value="2015">2015</option> 
 
     <option value="2016" selected="selected">2016</option> 
 
    </select> 
 
    </div> 
 
</div>

Fiddle here

Answer 2

Попробуйте функцию next в jquery.After событие щелчка.

$(document).ready(function() { 
 
    $(".current").each(function() { 
 
     $(this).click(function() { 
 
     var isCurrent = $(this).prop("checked"); 
 
     if (isCurrent == true) { 
 
      $(this).next(".end_work").prop("disabled", "disabled"); 
 
     } 
 
     else { 
 
      $(this).next(".end_work").prop("disabled", false); 
 
     } 
 
     }); 
 
    }); 
 
    });