Enable/disable for text-area

Question

I'm using jQuery to enable/disable a text-area, upon clicking two radio buttons. Here is my code:

HTML

<form>
   <input type="radio" id="aa" name="candidates">1 <br>
   <input type="radio" id="bb" name="candidates">2<br>
</form>
<textarea rows="2" id="candidateTextArea" style="width: 100%;">adadsajsd</textarea>

jQuery

$("#aa").change(function() { 
                    console.log("change in aa"); 
            $("#candidateTextArea").attr("disabled", "true"); 
      }
); 

$("#bb").change(function() { 
                    console.log("change in bb"); 
            $("#candidateTextArea").attr("disabled", "false"); 
      }
);

http://jsfiddle.net/uu1kje5x/5/

In practice what I see is that the text-area becomes disabled, and never gets active again. Any ideas why this doesn't work?

Possible duplicate of [Disable/enable an input with jQuery?](http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) — Pineda, Dec 09 '16 at 04:17

score 1 · Accepted Answer · answered Dec 09 '16 at 04:12

It should be false instead of "false". No need of quotes around false

$("#aa").change(function() { 
                    console.log("change in aa"); 
            $("#candidateTextArea").attr("disabled", "disabled"); 
      }
); 

$("#bb").change(function() { 
                    console.log("change in bb"); 
            $("#candidateTextArea").attr("disabled", false); 
      }
);

Here is fiddle

score 0 · Answer 2 · answered Dec 09 '16 at 04:12

Instead of setting the attribute set the prop:

$("#aa").change(function() { 
                console.log("change in aa"); 
        $("#candidateTextArea").prop("disabled",true);

  }

);

$("#bb").change(function() { 
                console.log("change in bb"); 
        $("#candidateTextArea").prop("disabled",false);
  }
);

Pineda · Answer 3 · 2016-12-10T01:14:32.417

0

To re-enable an HTML element that has had the attribute disabled applied to it you have to remove the attribute entirely.

You can do this using jQuery's .removeAttr() rather than setting it to false.

$("#bb").change(function() { 
   console.log("change in bb"); 
  $("#candidateTextArea").removeAttr("disabled"); // <------ used here
  }
);

edited Dec 10 '16 at 01:14

answered Dec 09 '16 at 04:14

Pineda

6,865
3
26
39

score 0 · Answer 4 · answered Dec 09 '16 at 04:15

You should add disabled attribute using attr() and remove the disabled attribute using removeAttr()

$("#aa").change(function() {
   $("#candidateTextArea").attr("disabled", "disabled");
});

$("#bb").change(function() {
  $("#candidateTextArea").removeAttr("disabled");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" id="aa" name="candidates">1
  <br>
  <input type="radio" id="bb" name="candidates">2
  <br>
</form>
<textarea rows="2" id="candidateTextArea" style="width: 100%;">adadsajsd</textarea>

Enable/disable for text-area

4 Answers4