CODEWITHSUNDEEP
jqueryformstextarea
fmdx
fmdx

Reputation: 39

How to select all textarea boxes within a given div in JQuery? (To disable/require all)

I have a project that shows a DIV within a form when a checkbox is selected, and within that DIV is a a script that could infinitely add text areas.

What I want is if a a bajillion of these text areas are created, I want to disable all of them from being submitted with the form, as well as make them not required if the over arching checkbox is deselected.

Edit: The reason I am specific about the textareas within a given DIV is because I have text areas elsewhere on the form!

So, how would I select all of the text boxes within a given DIV? Or, by name? (all of them on a given class (since they're all a part of the needb1_3[]array)). I've found some code/threads/answers to select input boxes, radios, checkboxes, but never text areas.

Thanks for any help in advance.

jsfiddle: http://jsfiddle.net/fmdx/rNqwc/1/

HTML:

<div>
    <input id="needb1-3customcheck" type="checkbox" class="schedb1checkboxes[]" data-     select="#needb1-3custom">Need Custom?
</div>
<div id="needb1-3custom" style="display:none; padding-left:40px;">
    <div id="customb1_3" style="padding-left:40px;">
        <textarea id="needb1_3_1" placeholder="Six Foot Utility..." name="needb1_3[]" required>
        </textarea>
    </div><!-- Ending Custom Div -->
    <div style="padding-left:40px;"><a id="add_b1_3" href="#"><span>Add Exception</span></a></div>
</div>

JQuery:

var b1_3customcounter = 1;
$(function () {
    $('a#add_b1_3').click(function () {
    b1_3customcounter += 1;
        $('#customb1_3').append(
        '<div><textarea id="need_b1_3_' + b1_3customcounter + '" placeholder="Six Foot Utility..." name="needb1_3[]' + '" required></textarea><a class="remove" href="#">Remove</a></div>');                                 
        event.preventDefault();
    });
});

$(document).on('click', '.remove', function(){
var $this = $(this);
$(this).closest('div').remove();
event.preventDefault();
});

$('#needb1-3customcheck').click(function(){
    var collapse_content_selector = $(this).attr('data-select');                    

    $(collapse_content_selector).toggle(function(){
      if($(this).css('display')=='none'){
                    //Do this while the section is hidden
        $('#needb1_3_1').prop('required', false);
}else{
        //Do this while the section is visible
        $('#needb1_3_1').prop('required', true);
      }
    });
  });

Upvotes: 1

Views: 7075

Answers (2)

SamV
SamV

Reputation: 7586

Select the textareas based on their element name not classes or an id.

Try:

$('#form textarea').prop('disabled', true);

This will work for the other ones such as select and input.

So to disable all textareas within your div #needb1-3custom try:

$('#needb1-3custom textarea').prop('disabled', true);

Upvotes: 6

Nishu Tayal
Nishu Tayal

Reputation: 20880

You can use following :

 $('#customb1_3 textarea').attr('disabled',true);

Here customb1_3 is textarea container div Id.

Upvotes: 0

Related Questions