Question

Possible to hide checkbox options depending on if text boxes have a value?

Forms

Updated May 5, 2015

asked on May 5, 2015 • Show version history

We are working on a form that will populate 1 to 5 text fields with values from a database lookup. We then have a table with two checkbox fields that each will have 5 options. We would like to be able to look at how many of the 5 text boxes have values in them and then only show that many options with the checkbox fields. Is that possible with some jQuery?

0 0

Answer

SELECTED ANSWER

replied on May 5, 2015 • Show version history

The following JavaScript works for me:

$(document).ready( function() {
  $('.misc1 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m1\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m1\"]").parent().show();
    }
  });
  $('.misc2 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m2\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m2\"]").parent().show();
    }
  });
  $('.misc3 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m3\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m3\"]").parent().show();
    }
  });
  $('.misc4 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m4\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m4\"]").parent().show();
    }
  });
});

The four "Misconception x" input fields are using the CSS classes misc1, misc2, misc3, and misc4 respectively.

As for the checkbox fields, the choice labels are: Misc 1, Misc 2, Misc 3, and Misc 4, but their values are are m1, m2, m3, and m4 respectively. If you're going to be using the default checkbox values instead of custom values, then change the JavaScript to use Misc_1, Misc_2, etc. instead of m1, m2 etc.

3 0

Replies

replied on May 5, 2015

Hi there,

Can you give me some screenshots as context?

0 0

View 8 previous replies

replied on May 5, 2015

Just updated the post with a screenshot.

0 0

replied on May 5, 2015

So Student Misconceptions section will be populated through a database lookup?

And some of single lines Misconception x will be empty.

You want to use whether it's empty to hide the Pre/Post checkbox choices?

0 0

replied on May 5, 2015

Correct. For example, if the database lookup only populates Misconceptions 1, 2, and 3, I only want to show Pre/Post checkbox choices Misc 1, Misc 2, Misc 3 and hide Misc 4.

0 0

replied on May 5, 2015

Hi Blake,

By default, you can hide all the checkboxes. Create a javascript to check the value of the single lines, and show the checkboxes options when there's a value.

0 0

replied on May 5, 2015

Correct, but we do not want to hide all of the options, just the ones corresponding to the text fields that don't have any values.

0 0

replied on May 5, 2015

For example, the screenshot below has Misconception 1 and Misconception 2 filled in. For the Pre and Post checkbox options, we would want Misc 3 and Misc 4 not to show at all. It would need to do this for each row added.

0 0

replied on May 5, 2015

If the value of the first option is m1, you can use the following script to locate the m1 checkbox and hide the option.

$("input[type=checkbox][value=\"m1\"]").parent().hide();

0 0

replied on May 5, 2015

I took the exact code you posted and changed 'm1' to 'Misc 4' and it did not hide those options.

0 0

SELECTED ANSWER

replied on May 5, 2015 • Show version history

The following JavaScript works for me:

$(document).ready( function() {
  $('.misc1 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m1\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m1\"]").parent().show();
    }
  });
  $('.misc2 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m2\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m2\"]").parent().show();
    }
  });
  $('.misc3 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m3\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m3\"]").parent().show();
    }
  });
  $('.misc4 input').on('change lookup', function() {
    if ($(this).val() == ""){
      $("input[type=checkbox][value=\"m4\"]").parent().hide();
    } else {
      $("input[type=checkbox][value=\"m4\"]").parent().show();
    }
  });
});

The four "Misconception x" input fields are using the CSS classes misc1, misc2, misc3, and misc4 respectively.

3 0

replied on May 5, 2015

I guess the value of Misc 4 is Misc_4, please check the value of your options.

0 0

replied on May 5, 2015 • Show version history

Good catch! That did it. Thank you.

0 0

You are not allowed to follow up in this post.

Question

Question

Possible to hide checkbox options depending on if text boxes have a value?

Answer

Replies

Sign in to reply to this post.