Disable form element when checkbox is checked

Question

In my rails application I have this two field in my form and I tried to disable the end_date field when the check box is checked so for this I have the jQuery code below

<div class="form-profile 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">
  <%= f.check_box :experience_current,class: 'is_current', id: "checkbox_id" %>
  I currently work here
</div>

The jQuery code

    $(document).ready(function(){
        $("input[class='is_current']").click(function() {
          if($('#checkbox_id').prop("checked")) {
            $('.end-date select').prop(
                'disabled', true
            );
            $('.end-date select').css(
                "background-color", "#D9D8DD"
          );

          } else {
                $('.end-date select').prop(
                    'disabled', false
                );
                $('.end-date select').css(
                    "background-color", "white"
                );
          }
        });
    });

This work just fine except when I'm submitting the form and try to access it again to edit it, in this case I found that the checkbox is checked but the form is not disabled, So I'm wondering on How can I resolve this isuue

Answer 1

You need to check for disabling the element on document ready.

Try this:

 function disableEndDate() {
   if($('#checkbox_id').prop("checked")) {
     $('.end-date select').prop(
         'disabled', true
     );
     $('.end-date select').css(
         "background-color", "#D9D8DD"
   );
 }

function enableEndDate() {
  $('.end-date select').prop(
            'disabled', false
   );
   $('.end-date select').css(
     "background-color", "white"
   );
 }

 $(document).ready(function() {
    disableEndDate();

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

You should improve it much more by aggregating logic into functions.

Answer 2

If your page reloaded, this might work:

if ($('input.is_curent').prop('checked')) {
    $('.end-date select').prop(
        'disabled', false
    );
    $('.end-date select').css(
        "background-color", "white"
    ); 
}

The code above simply checks if the checkbox is checked and disables the form element depending on the state of the checkbox.

Answer 3

You're only disabling the form field on click of the checkbox. So when the page (re)loads, no click event has been triggered, so no logic is performed. One possible way around this is to abstract the logic in to a function, which is called both on page load and on click of the checkbox.

function disableStuff() {
  // Perform disable logic
}

$(document).ready(function() {
  disableStuff();    
  $('.selector').click(function() {
    disableStuff();
  });
});