Enable text area on change of Select box

Question

I have array of select box and array of text area with same id and class.

  <div class="reasons">
       <select id="reason" class="reason_select" name="reason[]">
           <option>Please Select</option>
           <option value="misc">Misc</option>
        </select>
        <textarea id="reason_comment" name="reason_comment[]" disabled="disabled/>

        <select id="reason" class="reason_select" name="reason[]">
           <option>Please Select</option>
           <option value="misc">Misc</option>
        </select>
        <textarea id="reason_comment" name="reason_comment[]" disabled="disabled/>

        <select id="reason" class="reason_select" name="reason[]">
           <option>Please Select</option>
           <option value="misc">Misc</option>
        </select>
        <textarea id="reason_comment" name="reason_comment[]" disabled="disabled/>
  </div>

In these three pairs, on change of any of the select box I need to enable there corresponding textarea.

$(document).on("change", ".reason_select", function(){
    //not getting where to start and how to identify corresponding textarea.
});

I see multiple `id="reason_comment"` (like reason). It's not correct, an *id* is unique ! — Aure77, Jun 03 '15 at 15:34
@Aure77 is right. this is the starting point of the way to go. most of the answers so far below do a next, this is bad as it ties the UI to a specific order. do selections either on id, class, or data attribute. IMHO any sequential selector should be avoided unless necessary or obvious like li in ul / options within a select, definitely not good in this case. — hubson bropa, Jun 03 '15 at 15:38
Totally agree multiple elements with same id is damm bad idea..will try to assign unique id to all elements — Pardeep Dhingra, Jun 03 '15 at 15:40

score 1 · Answer 1 · answered Jun 03 '15 at 15:34

1

try

$(document).on("change", ".reason_select", function(){
    $(this).next().prop("disabled",false)
});

answered Jun 03 '15 at 15:34

Balachandran

9,567
1
16
26

Thanks..all of the answers above are same and working..I am confused..which answer i should mark right.. – Pardeep Dhingra Jun 03 '15 at 15:39
@PardeepDhingra That is your wish :) – Balachandran Jun 03 '15 at 15:39
upvote them all and give the accepted to the earliest correct – hubson bropa Jun 03 '15 at 15:43
@PardeepDhingra Good... and Welcome :) – Balachandran Jun 03 '15 at 15:45

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

not getting where to start and how to identify corresponding textarea.

The first place to start would be to not use the same id for multiple elements. See Why is it a bad thing to have multiple HTML elements with the same id attribute?

You can use next() instead

$(document).on("change", ".reason_select", function(){
    $(this).next('textarea').prop('disabled',false);
});

edited May 23 '17 at 12:29

Community

1
1

answered Jun 03 '15 at 15:34

AmmarCSE

30,079
5
45
53

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Identifiers in HTML must be unique A good read Why is it a bad thing to have multiple HTML elements with the same id attribute?

You can use $.fn.next() to traverse to immediate sibling.

Use

$(document).on("change", ".reason_select", function(){
    $(this).next('textarea').prop('disabled', false)
});

edited May 23 '17 at 11:51

Community

1
1

answered Jun 03 '15 at 15:34

Satpal

132,252
13
159
168

score 1 · Answer 4 · answered Jun 03 '15 at 15:36

1

You need to use unique IDs. Instead make it a class in your textboxes:

class="reason_comment"
^^^^^

And in jQuery:

 $(document).on("change", ".reason_select", function(){
  $(this).next('.reason_comment').prop('disabled',false);
 });

answered Jun 03 '15 at 15:36

Zee

8,420
5
36
58

Enable text area on change of Select box

4 Answers4