jQuery Disable textarea with certain content

Question

I have a series of textareas which by default should be active, but when containing a certain text it should be disabled.

HTML

<textarea id="my_ta_1">Example 1</textarea>
<textarea id="my_ta_2">Example 2</textarea>
<textarea id="my_ta_3">Example 3</textarea>

jQuery (Trying to disable the textarea with Example 2 inside.)

if (!$('[id*="my_ta_"]').val(Example 2))
 {$(this).attr("disabled","disabled");}

Is it possible?

And am i anywhere near ? =)

JSFiddle

I am using following jQuery to change to text of textarea #my_ta_2

$('select').change( function()
 {var text1 = $('select option:selected').val();
  $('#my_ta_2').html(text1);
 }
);

Is it possible to make it active again when that happens?

Is it possible to make it re-enable the textarea if the text changes — Danny R. Thillemann
– Danny R. Thillemann, Commented Oct 23, 2013 at 2:25

adeneo · Accepted Answer · 2013-10-23 02:14:09Z

2

You can use a filter() and filter out whatever value you'd like :

$('textarea[id^="my_ta_"]').filter(function() {
    return this.value.toLowerCase().indexOf('example 2') != -1;
}).prop('disabled', true);

an example disabling any textarea containing the string 'example 2' case-insensitive.

FIDDLE

answered Oct 23, 2013 at 2:14

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-10-23 02:14:38Z

1

Whenever you use a getter method on a jQuery wrapper set, it will return the value of the first element of the set... it will ignore the rest of the elements in the set...

Also you where setting the value of the textarea's instead of getting them to compare...

You need to use the .prop() setter that takes a function as a parameter

$('textarea[id*="my_ta_"]').prop('disabled', function(){
    return $.trim(this.value) == 'Example 2'
})

Demo: Fiddle

answered Oct 23, 2013 at 2:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

The Alpha · Accepted Answer · 2013-10-23 03:03:48Z

You may try this (it'll disable the textarea when you type Example 2 in any textarea which has an id starting with my_ta_)

$('[id^="my_ta_"]').on('keyup', function(){
    var txt = $(this).val();
    if(txt.match(/Example 2/)){
        $(this).prop('disabled', 1);
    }
});

It'll even match the example 2 from Some text Example 1 but example 2.

Example Here.

Update : To initially check for the text example 2 and make it disabled there are other (up voted) answers, pick one that you like but I wrote the code to check textarea when user writes in the textarea and if it finds example 2(in any case/any where) then the textarea will be disabled.

Update : To re-enable the disabled textarea using a select value

$('[id^="my_ta_"]').on('keyup change', function(){
    var txt = $(this).val();
    if(txt.match(/Example 2/i)){
        $(this).prop('disabled', 1);
    }
    else $(this).prop('disabled', 0);
});

// works on (re-enables) my_ta_2
$('select').on('change', function(){
    var text1 = $(this).val();
    $('#my_ta_2').val(text1).trigger('change');
});

Example Here.

Update : Maybe you may try this too (initially check and disable and re-enable on change again)

$('textarea[id^="my_ta_"]').prop('disabled', function(){
    return $.trim(this.value.toLowerCase()) == 'example 2'
})
.on('change', function(){
    var txt = $(this).val();
    if(txt.match(/example 2/i)){
        $(this).prop('disabled', 1);
    }
    else $(this).prop('disabled', 0);
});

// works on (re-enables) my_ta_2
$('select').on('change', function(){
    var text1 = $(this).val();
    $('#my_ta_2').val(text1).trigger('change');
});

Example here.

TGH · Accepted Answer · 2013-10-23 02:15:49Z

0

$("textarea").each(function(){
  if($(this).text() !== "Example 2"){
     $(this).attr("disabled","disabled")
  }
});

Try the above. If you have additional tetareas that you don't want to be affected just wrap the specified ones in a parent and find them relative to their parent

answered Oct 23, 2013 at 2:15

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Comments

Shane Donnelly · Accepted Answer · 2013-10-23 02:29:33Z

0

You were on the right track, here's one way to do it:

var text_to_match = "Example 2";

$('[id*="my_ta_"]').each(function(){
    var cur_value = $(this).val();
    if(cur_value === text_to_match){
        $(this).attr('disabled', 'disabled');
    }
});

Fiddle

answered Oct 23, 2013 at 2:29

Shane Donnelly

182 bronze badges

Collectives™ on Stack Overflow

jQuery Disable textarea with certain content

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related