CODEWITHSUNDEEP
jquery
Thierry Blais
Thierry Blais

Reputation: 2858

Why is .next() method not working here, jQuery?

So I have a form that's half built here.

I have 10 lines, I don't want the next line to be available until there is something in the current line.

Here is the Fiddle

JS:

$(document).ready(function(e){
    var openLines = $('.lineToText');
    if (openLines.length){
        //$('textarea').css('display', 'none');
        openLines.each(function(index, element){
            if (index>0) {
                $(this).prop('disabled', true);
                }
            });
        $('.lineToText').on('keyup', this, function(){
            if (this.value.length){
                $(this).next('.lineToText').prop('disabled', false); //<== thought this would do the job but it's not
                } else {
                    $(this).prop('disabled', true);
                    }
            });
        }
    });

HTML:

<TABLE SUMMARY="layout table" CELLPADDING="1" CELLSPACING="0" BORDER="0">

<TR>

<TD  VALIGN="TOP"><INPUT ID="Q1_96" ONCLICK="ExclusiveChoiceClick('Q1:96');" ONKEYPRESS="return true;" TABINDEX="100" TYPE="CHECKBOX" NAME="Q1:96" VALUE="96" ></TD><TD  CLASS="CHOICES" VALIGN="TOP"  >1: <INPUT class="lineToText" type="text" size="50"><br>

2: <INPUT class="lineToText" type="text" size="50"><br>

3: <INPUT class="lineToText" type="text" size="50"><br>

4: <INPUT class="lineToText" type="text" size="50"><br>

5: <INPUT class="lineToText" type="text" size="50"><br>

6: <INPUT class="lineToText" type="text" size="50"><br>

7: <INPUT class="lineToText" type="text" size="50"><br>

8: <INPUT class="lineToText" type="text" size="50"><br>

9: <INPUT class="lineToText" type="text" size="50"><br>

10: <INPUT class="lineToText" type="text" size="50"><BR><TEXTAREA  ID="Q1_96_O" TABINDEX="101" COLS="25" ROWS="5" CLASS="OPENENDEDANSWER" NAME="Q1:O"></TEXTAREA></TD>

</TR>

<TR>

<TD  VALIGN="TOP"><INPUT ID="Q1_99" ONCLICK="ExclusiveChoiceClick('Q1:99');" ONKEYPRESS="return true;" TABINDEX="102" TYPE="CHECKBOX" NAME="Q1:99" VALUE="99" ></TD><TD  CLASS="CHOICES" VALIGN="TOP">Don't Know</TD>

</TR>

</TABLE>

Thought $(this).next('.lineToText') would be appropriate to select the next item but it doesn't, can anyone tell me what I'm missing?

Upvotes: 1

Views: 235

Answers (2)

addisu
addisu

Reputation: 634

Also, try this:

if (this.value.length > 0) {
    $(this).siblings('.lineToText').first().removeAttr('disabled');
}

Upvotes: 0

bevacqua
bevacqua

Reputation: 48476

From jQuery Docs:

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Use nextAll(".lineToText:first") instead.

Fiddle here

The reason your approach doesn't work is because of the <br /> elements that are in between your <input />elements.

Upvotes: 3

Related Questions