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, Oct 23 '13 at 02:25

score 2 · Answer 1 · answered Oct 23 '13 at 02:14

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

score 1 · Answer 2 · answered Oct 23 '13 at 02:14

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

score 0 · Answer 3 · answered Oct 23 '13 at 02:15

$("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

The Alpha · Accepted Answer · 2013-10-23T03:03:48.737

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.

score 0 · Answer 5 · answered Oct 23 '13 at 02:29

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

jQuery Disable textarea with certain content

5 Answers5