Working jQuery in link to add fields

Question

In my Rails app I have this code

<%= form_for @experience, url: experience_path do |f| %>      
    <div class="experselect end-date">
        <%= f.label :experience_end, class: "profile_label" %><br />
      <%= f.date_select :experience_end, {start_year: 1945, discard_day: true, order: [ :day, :month, :year ]}, :html=> {class: 'date-select'} %>
    </div>

    <div class="form-checkbox current-item">
      <%= f.check_box :experience_current, class: 'is_current', id: "checkbox_id" %>
      I currently work here
    </div>
<%= f.submit "Update experience" %>

And I have a link_to_add_fields method that add the same form as this I have also this script that disable the experience_end when the checkbox is checked and it works great.

function disableEndDate(thisObj) {
    var targetedSelect = thisObj.closest(".form-checkbox").prev(".experselect").find("select");

    if (thisObj.prop("checked")) {

        targetedSelect.prop(
            'disabled', true);
        targetedSelect.css(
            "background-color", "#D9D8DD");


    } else {
        targetedSelect.prop(
            'disabled', false);
        targetedSelect.css(
            "background-color", "#FFFFFF");
    }
}

$(document).ready(function(){
  $("input[class='is_current']").click(function () {
      disableEndDate($(this));
  });
});

But actually my problem is when checkbox and submit the form and try to edit it again i find that the checkbox is checked and the select is disabled but the background of the select is not #D9D8DD as expected

EdenSource · Accepted Answer · 2015-04-14 10:44:04Z

1

You have to reach your select starting from your checkbox. For this, you 'll need to pass $(this)parameter to your disableEndDate() function on click event :

$("input[class='is_current']").click(function () {
    disableEndDate($(this));
});

Now your function is ready to get your clicked checkbox element. And you also know that DIVs containing input and select are nested.

You get targetedSelect starting at your checkbox. You reach the parent div (.form-checkbox), then the previous div containing the select element (.form-checkbox), and finally, find the select.

So :

function disableEndDate(thisObj) {
    var targetedSelect = thisObj.closest(".form-checkbox").prev(".experselect").find("select");

    if (thisObj.prop("checked")) {

        targetedSelect.prop(
            'disabled', true);
        targetedSelect.css(
            "background-color", "#D9D8DD");


    } else {
        targetedSelect.prop(
            'disabled', false);
        targetedSelect.css(
            "background-color", "#FFFFFF");
    }
}

Live exemple

Hope this will help

edited Apr 14, 2015 at 10:44

answered Apr 14, 2015 at 10:36

EdenSource

3,38719 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rocki Over a year ago

Thank you very much for your help it is working great there is only one problem that when I submit the form with checkbox checked and try to edit it again the select is disabled but the background is not "#D9D8DD"

rocki Over a year ago

I have edit my question with the code you have suggested to me

EdenSource Over a year ago

There is not the part of your code concerning the submit

EdenSource Over a year ago

Unable to reproduce the issue into the fiddle. Adding a class instead of modifying inline css may work : jsfiddle.net/jrn4er6x/1

Collectives™ on Stack Overflow

Working jQuery in link to add fields

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related