CODEWITHSUNDEEP
jqueryhtml
Danny R. Thillemann
Danny R. Thillemann

Reputation: 25

jQuery Disable textarea with certain content

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?

Upvotes: 0

Views: 328

Answers (5)

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 0

Shane Donnelly
Shane Donnelly

Reputation: 18

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

Upvotes: 0

TGH
TGH

Reputation: 39248

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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

Upvotes: 2

Related Questions