Reputation: 3966
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
Reputation: 12305
Try this:
$(document).ready(function(){
$("#id_invoiceHoldReason").attr("disabled","disabled");
});
Working fiddle: http://jsfiddle.net/robertrozas/txGvL/1/
Upvotes: 1
Reputation: 14535
$('#id_placeInvoiceOnHold').attr('disabled', 'disabled');
or
$('#id_placeInvoiceOnHold').prop('disabled', true);
Upvotes: 1