how to enable text area or input type="text" using jquery

Question

am having the code as follows when clicked on radio button yes the text box has to be enabled if not it has to be disabled. please someone help me. thanks

<div class="label_left">
    <label>Does the tourism office operate on a biennial budget? : (Y/N)</label>
</div>
<div class="text_right">
    <br>
    <br>
    <input type="radio" id="high" name="high" />
    <label>Y</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" id="high" name="high" />
    <label>N</label>
    <br />
    <br />
    <br />
</div>
<div class="label_left">
    <label>If YES,please indicate when the current biennial budget began: (mm/dd/yy)</label>
</div>
<div class="text_right">
    <br>
    <br>
    <input type="text" name="date_biennial_budget" id="date_biennial_budget" value="" size="30" />
    <br />
    <br />
    <br />
</div>

possible duplicate of [How to disable an input with jQuery?](http://stackoverflow.com/questions/1414365/how-to-disable-an-input-with-jquery) — aBhijit, Jul 26 '13 at 06:46

bipen · Accepted Answer · 2014-02-05T06:53:51.583

first of all make sure your id is unique..

use prop() to enable/disable elements.. (make sure you add value to your radio button... which is missing in your code )

HTML

<input type="radio" id="high" value="Y" name="high"  />
<input type="radio" id="high" value="N" name="high"  />

jquery

 $('input[name="high"]').change(function(){
      if($(this).val() == 'Y'){
         $('#date_biennial_budget').prop('disabled',false);
      }else{
         $('#date_biennial_budget').prop('disabled',true);
      }
 });

score 3 · Answer 2 · edited Jul 26 '13 at 07:11

3

It's easy with jQuery > 1.6

$('input').prop('disabled',true)
$('input').prop('disabled',false)

To react to your radio button, you have to give each one a different value attribute (1 for yes?) and listen to the change event.

$("#date_biennial_budget").change(function(){

    if($(this).val() == 1) 
       $('input[name=high]').prop('disabled',false);
    else 
       $('input[name=high]').prop('disabled',true);
}

edited Jul 26 '13 at 07:11

Human Being

7,671
25
86
134

answered Jul 26 '13 at 06:43

Armel Larcier

14,350
7
62
86

This will disable the entire `input` tag inclusing radio, button etc – Praveen Jul 26 '13 at 06:45

score 1 · Answer 3 · answered Jul 26 '13 at 06:52

1

if($('#high').is(":selected") {
   $('input').prop('disabled',true);
} else {
   $('input').prop('disabled',false);
}

try this

answered Jul 26 '13 at 06:52

user2621556

56
2

Praveen · Answer 4 · 2013-07-26T07:06:05.807

Use this for text-box,

$('input[type=text]').prop('disabled',true);

UPDATES: Since you have used label tag, you use for attribute like below

<input type="radio" id="highY" name="high" />
<label for="highY">Y</label>
<input type="radio" id="highN" name="high" />
<label for="highN">N</label>

Assign the id of the respective input to the for attribute in label

Based on this you can do like this

$('input[name=high]').on('change', function () {
    var label = $('label[for=' + this.id + ']').text();
    if (label === "Y") {
        $('#date_biennial_budget').prop('disabled', false);
    } else {
        $('#date_biennial_budget').prop('disabled', true);
    }
});

JSFiddle

how to enable text area or input type="text" using jquery

4 Answers4