CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railsforms
Arief R Ramadhan
Arief R Ramadhan

Reputation: 234

If checked then disable form (multi form)

I have experiences form where the user can input their working experiences there. So the form is multi-form where the user can add as many as experiences they have.

For instance, the user has two working experiences, the HTML of the form will be:

<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>

So there are two elements which have class of current and end_work. Now, I want that so when the user checked the is_current, the end_work will be disabled. So, I add these JS code:

$(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);
        }
      });
    });
  });

It should work like this: If I checked the first is_current, then the first end_work field will be disabled without affecting the second end_work.

However, it affects the second end_work when I checked the first is_current. I can't change the class to be different for every form because the form is generated with the cocoon gem (nested form). What is the solution?

Update 1

Here is my HTML code:

<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>

Upvotes: 0

Views: 67

Answers (2)

Rayon
Rayon

Reputation: 36609

Use .next(SELECTOR) to select only next element with respective checkbox

Try this:

$('.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

Upvotes: 1

Sravan
Sravan

Reputation: 18647

Try the next function in jquery.After the click event. 

$(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);
        }
      });
    });
  });

Upvotes: 0

Related Questions