Jenny
Jenny

Reputation: 919

Hide every instance of an input field but the first one

I have a form, on the first page of the form the user can select how many people to register, in the next step the form asks the same questions for each registrant. I would like for one of the questions to only display for the first registrant and be hidden for the other registrants.

Each of the div's use practically the same naming but the number after rptAttributesPerRegistrant changes, I want to show

#PC4187_ev2wiz_step2_ctlRegs_rptPerEvent_ctlAttributes_0_rptRegistrants_0_rptAttributesPerRegistrant_0_lblAttributeName_0

but hide any others, for example, hide the following:

#PC4187_ev2wiz_step2_ctlRegs_rptPerEvent_ctlAttributes_0_rptRegistrants_0_rptAttributesPerRegistrant_1_lblAttributeName_0
#PC4187_ev2wiz_step2_ctlRegs_rptPerEvent_ctlAttributes_0_rptRegistrants_0_rptAttributesPerRegistrant_2_lblAttributeName_0

and so on . . .

Please see for the entire code http://jsfiddle.net/jelane20/U6kja/

I do not want to hide the vegetarian field however which also uses the same type of div

I am not sure how to target every instance of the div but the first one and exclude the vegetarian question, I need to hide any of the divs that use a number greater than 0. Any help would be greatly appreciated!

Thank you!

Upvotes: 1

Views: 92

Answers (2)

Sai
Sai

Reputation: 2068

Please see the below fiddle fiddle

Whenever you have long value for attributes and want to match a particular part you have use jquery attribute selectors

$("[id*='rptAttributesPerRegistrant']")

The above statement will give you all the selectors containing "rptAttributesPerRegistrant" then you can filter out based on type etc.

Upvotes: 1

crates_barrels
crates_barrels

Reputation: 1028

It's not entirely clear to me what you're trying to accomplish, but this shows only the first registrant options:

$('div.Ev2_AttributeContent').children().not(':first-child').hide();

http://jsfiddle.net/Q82TT/

To show the options for the second registrant:

$('div.Ev2_AttributeContent').children().not(':nth-child(3)').hide();

... and for the third:

$('div.Ev2_AttributeContent').children().not(':nth-child(5)').hide();

Upvotes: 0

Related Questions