Disabling Controls

Question

I'm trying to disable some controls on my Aspx page but can't get it working. I've tried both Javascript and JQuery so I know I must be doing something simple wrong.

Here's what I have atm and I know that it's definitely entering both functions when I want them to because I've stuck in alerts to tell me so. However the controls remain enabled always!

<script language="javascript" type="text/javascript">

function fun1(){
var input = $('#txtDocs');
input.removeAttr('disabled');
}

function fun2() {
var input = $('#txtDocs');
input.attr('disabled', 'disabled');
}

And the control itself;

<p>
<asp:TextBox ID="txtDocs" runat="server"  Width="218px" 
      Height="75px" TextMode="MultiLine" MaxLength="40"/>
</p>

I've also tried swapping out the code in both functions for various versions of the following;

document.getElementById("txtDocs").enabled = true;
document.getElementById("txtDocs").attributes.enabled = true;
document.getElementById("txtDocs").disabled = false;

No good though. What am I doing wrong?

UPDATE

current code;

function fun1(){
alert("1 enable");
$('#txtDocs').removeAttr('disabled');
alert("2 enable");
}

function fun2() {
alert("1 disable");
$('#txtDocs').prop('disabled', true);
alert("2 disable");
}

<asp:TextBox ID="txtDocs" runat="server"  Width="218px" ClientIDMode="Static"
      Height="75px" TextMode="MultiLine" MaxLength="40"/>

Still no good :/ I'm only seeing alert("1 disable"), alert("1 enable") and alert("2 enable") so not getting through fun2...

NOTE

Debugged into my code and just noticed that during run time my Textbox is actually a Textarea. Any significance? Also it's ID will have the usual "ctl00_MainContentPlaceHolder_" tagged onto the start.

possibly relevant: http://stackoverflow.com/questions/1310466/jquery-with-asp-net-webforms-disabling-textboxes — kei, Jul 31 '12 at 14:50

score 3 · Answer 1 · answered Jul 31 '12 at 14:50

You should be using prop() if you're using jQuery 1.6+

$('#txtDocs').prop('disabled',true);
$('#txtDocs').prop('disabled',false);

Acoording to jQuery docs http://api.jquery.com/prop/

The .prop() method should be used to set disabled and checked instead of the .attr() method.

score 1 · Answer 2 · answered Jul 31 '12 at 14:51

1

disabled is a binary property, not an attribute, so you need to use:

$('#txtDocs').prop('disabled','disabled');
$('#txtDocs').removeAttr('disabled');

answered Jul 31 '12 at 14:51

Diodeus - James MacFarlane

112,730
33
157
176

1

.NET doesn't play well with IDS. It wants to own them all. Use a CSS class name instead. $('.txtDocs'), and give your element the matching css class name, – Diodeus - James MacFarlane Jul 31 '12 at 15:54

score 0 · Answer 3 · answered Jul 31 '12 at 14:52

0

it looks like you should be doing:

input.attr('disabled', true); // to disable

input.removeAttr('disabled'); // to enable

answered Jul 31 '12 at 14:52

Evan

5,975
8
34
63

score 0 · Answer 4 · answered Jul 31 '12 at 14:52

Your TextBox ID "txtDocs" does not end up on the client like that, so javascript cannot find an element with id="txtDocs" You need to set the ClientIDMode attribute on your TextBox control to Static:

<asp:TextBox ID="txtDocs" runat="server" Width="218px" ClientIDMode="Static" 
   Height="75px" TextMode="MultiLine" MaxLength="40" />

score 0 · Answer 5 · 2012-07-31T14:58:53.957

0

Mark Up

You are missing ClientIDMode...

<asp:TextBox ID="txtDocs" runat="server" Width="218px" 
  ClientIDMode="Static" Height="75px" TextMode="MultiLine" MaxLength="40" />

JavaScript

document.getElementById('IdOfTheTextbox').disabled = true/false;

You FireBug instead to scan the issue closely

edited Jul 31 '12 at 14:58

answered Jul 31 '12 at 14:52

score 0 · Accepted Answer · answered Aug 01 '12 at 07:49

Cannot really explain it but after spending ages trying everything here and everything I could find on the net, referencing my object like so worked;

document.getElementById('ctl00_MainContentPlaceHolder_txtDocs').disabled = false;

Note the lack of # before the ID. Also, I did not need the ClientIDMode as I put "ctl00_MainContentPlaceHolder_" before my ID.

Disabling Controls

6 Answers6

Mark Up

JavaScript

You FireBug instead to scan the issue closely