Hide Checkbox Field with JavaScript within a Collection

SELECTED ANSWER

replied on September 30, 2022

How about this?

$('#q681').css('display', 'none');

The Fieldxxx id values are the actual input/select/textarea parts of a field. And the (1) at the end of it just means the first checkbox input on the field. But the qxxx id values are the entire field and all of its parts (label, helptext, input, validation, etc.).

Since it sounds like you want the entire field hidden, instead of just the input, I think it'll work with the q id reference.

Also, many of us would recommend using classes instead of referencing the IDs directly whenever possible. In that case, you could add a class to the field (something like resident2SameAddressCheckbox) and then use Javascript to reference the class when hiding it:

$('.resident2SameAddressCheckbox').css('display', 'none');

1 0

replied on October 2, 2022

Thanks Matthew,

I thought using the q value would hide both instances.

0 0

replied on October 3, 2022 • Show version history

I’m sorry, I didn’t actually give you the best code for dealing with the field in a collection.

If you want to limit it to just the field in the first row of the collection, you should be able to do the same \\(1\\) thing, just with the q ID instead of the Field ID.

$('#q681\\(1\\)')

If you want to do it with every instance of the field in the collection, you would need to do something like this instead:

// Loop through all fields with the q681 ID inside
//the collection, and add CSS to hide the field.
$('#q681').each(function() {
  $(this).css('display', 'none');
});

1 0

replied on October 3, 2022

The first code you gave hid the first instance in the collection only, too.

1 0

Question

Question

Hide Checkbox Field with JavaScript within a Collection

Answer

Replies

Sign in to reply to this post.