Garfonzo
Garfonzo

Reputation: 3966

jQuery - can't disable a textarea

Simple situation, but I can't get it to work. I have a checkbox and a text area. What I want is when the uses checks the checkbox, it enables the text area, when the user unchecks the box, I want the text area to be disabled. Simple right? I don't know what I'm doing wrong...

HTML:

<!-- Checkbox -->
<input type="checkbox" name="placeInvoiceOnHold" id="id_placeInvoiceOnHold">

<!-- Textarea -->
<textarea id="id_invoiceHoldReason" rows="10" cols="40" name="invoiceHoldReason" class="text-field"></textarea>

jQuery at bottom of page, in a <script></script> block:

function check_holds() {
  if ($("#id_placeInvoiceOnHold").is(":checked")) {
    $("#id_invoiceHoldReason").attr('disabled',true);
  }
  else {
    $("#id_invoiceHoldReason").removeAttr('disabled');
  }
}

I have tried adding a bit of code to see if my .click method was firing and actually handling the right element, and it is. Something like this:

function check_holds() {
  if ($("#id_placeInvoiceOnHold").is(":checked")) {
    $("#id_invoiceHoldReason").text("TESTING"); <!-- <<-- This line here as a a text  -->
    $("#id_invoiceHoldReason").attr('disabled',true);
  }
  else {
    $("#id_invoiceHoldReason").removeAttr('disabled');
  }
}

The "TESTING" shows up in the text area, so I know I have the right element ID. But seriously, why isn't it working?! I've looked at the Chrome console and there are no errors popping up.

This is what Ive tried:

$("#id_invoiceHoldReason").prop('disabled','disabled');
$("#id_invoiceHoldReason").disabled = true;

None seem to work. What am I missing?

Upvotes: 0

Views: 740

Answers (3)

Wilfredo P
Wilfredo P

Reputation: 4076

Use:

$('#id_invoiceHoldReason').prop('disabled', true);

Live Demo

Upvotes: 4

Hackerman
Hackerman

Reputation: 12305

Try this:

$(document).ready(function(){
  $("#id_invoiceHoldReason").attr("disabled","disabled"); 
});

Working fiddle: http://jsfiddle.net/robertrozas/txGvL/1/

Upvotes: 1

Yaroslav Admin
Yaroslav Admin

Reputation: 14535

$('#id_placeInvoiceOnHold').attr('disabled', 'disabled');

or

$('#id_placeInvoiceOnHold').prop('disabled', true);

Upvotes: 1

Related Questions