jQuery show/hide multiple 'Other' input fields based on select drop down

Question

I am using the follwoing jQuery to show/hide an 'Other' title field on page:

$('label[for=customerTitleOther], #customerTitleOther').hide();

$('.jTitle').change(function() {
    if($(this).val() != 'Other') {
        $('label[for=customerTitleOther], .jOther').hide();
    } 
    else {
        $('label[for=customerTitleOther], .jOther').show();
    }       
});

The field & associated label are hidden by default. However, the application i am building has scope for multiple entries on the same page so there may be multiple other fields like. Any ideas on how to extend the jQuery to cope with any number of 'Other' fields on page?

Answer 1

Well, it's not trivial, but what I've implemented is a "toggleOnSwitch" mechanism. Fragments of the page are annotated with the class name "toggleOnSwitch" and another class that tells what <option>, checkbox, or radio button determines visibility. The event handlers attached to the "toggler" elements (that is, the <options> or input fields) add or remove a particular class from the "toggled" elements, and (when switched "off" make sure that input fields are marked as "disabled" and a couple of other book-keeping tasks like that.

One trick is that when the "toggler" element is something like an <option> or a radio button input, when one element is toggled "off" the code has to check to see whether another element is toggled "on". That's because there's no event logged when one radio button loses the "checked" setting because another one has been clicked.

I've been thinking about posting my code for this, but it'd have to be cleaned up a little and stripped of one or two specialized hacks for my own application. Also, I'd want to make it use John Resig's "metadata" plugin instead of the cheesy version I did myself (before I knew "metadata.js" is available).

Answer 2

To answer my own question:

            $(".jTitle").change(function(){
            //set the select value
            var val = $(this).val();
            if(val != "Other") {
                $(this).nextAll('.jOther').hide();
            } else {
                $(this).nextAll('.jOther').show();
            }
        })

With the HTML being:

<td>
                        <select id="titleDepend1" class="inlineSpace jTitle">
                            <option value="Please select">Please select...</option>
                            <option value="Mr">Mr</option>
                            <option value="Mrs">Mrs</option>
                            <option value="Ms">Ms</option>
                            <option value="Miss">Miss</option>
                            <option value="Dr">Dr</option>
                            <option value="Other">Other</option>
                        </select>
                        <label for="otherDepend1" class="inlineSpace jOther">Other</label>
                        <input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
                    </td>

So all the following elements with class jOther will be shown onChange.