Question

I have the following jQuery code:

<script> function hideMenteeQuestions() {
    $("#menteeapp").hide();
    $("textarea[name='short_term_goals']").rules("remove", "required");
    $("textarea[name='long_term_goals']").rules("remove", "required");
}

function showMenteeQuestions() {
    $("#menteeapp").show();
    $("textarea[name='short_term_goals']").rules("add", {
        required: true
    });
    $("textarea[name='long_term_goals']").rules("add", {
        required: true
    });
}

function hideMentorQuestions() {
    $("#mentorapp").hide();
    $("input[name='mentees']").rules("remove", "required");
}

function showMentorQuestions() {
    $("#mentorapp").show();
    $("input[name='mentees']").rules("add", {
        required: true
    });
}

</script>

<script>
    $(document).ready(function(){

    $("#mentee").change(function(){
      if($(this).is(':checked')){
        showMenteeQuestions();
      }else{
        hideMenteeQuestions();
      }
    });
    $("#mentor").change(function(){
      if($(this).is(':checked')){
        showMentorQuestions();
      }else{
        hideMentorQuestions();
      }
    });

    $('#mentee').change();
    $('#mentor').change();

    });
    </script >

Also, here’s the HTML for my checkboxes:

<input type="checkbox" name="type[]" id="mentor" value="mentor"><span class="checkbox">Mentor</span>
<input type="checkbox" name="type[]" id="mentee" value="mentee"><span class="checkbox">Mentee</span>

It’s supposed to hide certain divs based on the checkbox you’re selecting. It works when you click the checkboxes. However, I also want to trigger the change functions on page load. For some reason, it’s only calling the first change function, which in this case is for #mentee. If I change the order, then the other one works. It never gets into the second change() call.

Any ideas?

Answer 1

Got it to work by changing the hideMenteeQuestions() and showMenteeQuestions() functions:

function hideMenteeQuestions(){
  $("#menteeapp").hide();
  $("textarea[name='short_term_goals']").removeClass('required');
  $("textarea[name='long_term_goals']").removeClass('required');
}

function showMenteeQuestions(){
  $("#menteeapp").show();
  $("textarea[name='short_term_goals']").removeClass('required').addClass('required');
  $("textarea[name='long_term_goals']").removeClass('required').addClass('required');
}