JQuery to enable,disable textbox is not working consistently

Question

I have a DropDownList as a custom control inserted into a subform which is within a popup window on my main page. I have coded unique CssClass identifiers for both the DropDownList and the textbox I am trying to enable/disable. I only want the textbox enabled for DropDownList values 317 and 318, all others should disable the textbox. Here is the problem... If I bring up my popup window and select an action other than 317/318, it disables the textbox as expected. Then if I change my mind and select 317 or 318 it DOES NOT enable the textbox. This seems real strange that it partially works.

I have the following jquery code in my main page:

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

     var _CASE_RESERVE_ACTION = "317"; 
     var _LEGAL_RESERVE_ACTION = "318";

     function pageLoad() {

         $(".statusActionDDLCssClass").change(function() {
             var value = $(this).val();
             if (value == _CASE_RESERVE_ACTION || value == _LEGAL_RESERVE_ACTION)
                 $(".statusActionAmountCssClass").attr('enabled', 'enabled');
             else
                 $(".statusActionAmountCssClass").attr('disabled', 'disabled');
         });
     }

</script>

Here is the custom control with the DropDownList:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="StStatusActionLookup.ascx.cs" Inherits="Company.Solutions.Web.Controls.StStatusActionLookup" %>

<div id="mainControlContainer" style="width:99%; padding:8px;">

    <div id="comboContainer" style="float:left; padding-top:12px;padding-left:5px; padding-right:5px; padding-bottom:3px;">
        <asp:UpdatePanel ID="update1" runat="server" UpdateMode="Always">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="chkComments" EventName="CheckedChanged" />
                <asp:AsyncPostBackTrigger ControlID="chkDenials" EventName="CheckedChanged" />
                <asp:AsyncPostBackTrigger ControlID="chkOther" EventName="CheckedChanged" />
            </Triggers>
            <ContentTemplate>
                <asp:DropDownList runat="server" ID="ddlLookup" width="240px" CssClass="statusActionDDLCssClass" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    <div id="filterContainer" style="text-align:left;padding-left:6px;width:275px">
        <fieldset style="width:260;">
            <legend>Filters</legend>
            <asp:CheckBox ID="chkComments" runat="server" Text="Comments" AutoPostBack="true"  />
            <asp:CheckBox ID="chkDenials" runat="server" Text="Denials" AutoPostBack="true" />
            <asp:CheckBox ID="chkOther" runat="server" Text="Other" AutoPostBack="true" />
        </fieldset>

    </div>    
</div>

And here is my subform with the text box (txtStatusActionAmount):

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="StatusActionAddSubform.ascx.cs" 
Inherits="Company.Solutions.Web.Controls.StatusActionAddSubform" %>
<%@ Register TagPrefix="st" TagName="StatusActionLookup" Src="~/Controls/StStatusActionLookup.ascx" %>
<div class="NinetyNinePercentWide">
    <div class="NinetyNinePercentWide EightPixelBottomMargin">
        <div class="RowHeader" style="padding-top: 20px;">
            <span>Action:</span>
        </div>
        <div>
            <xy:StatusActionLookup ID="statusActionLookup1" runat="server" />
        </div>
    </div>
    <div class="NinetyNinePercentWide EightPixelBottomMargin">
        <div class="quarterWidthDiv">
            <span>New Status:</span>
            <asp:Literal runat="server" Text="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" ID="spc2" />
            <asp:DropDownList runat="server" ID="ddlNewStatus">
                <asp:ListItem Selected="True" Value="" Text="" />
                <asp:ListItem Value="01" Text="Open" />
                <asp:ListItem Value="02" Text="Closed" />
            </asp:DropDownList>
        </div>
        <div class="quarterWidthDiv">
            <span>Date:</span>
            <asp:Literal runat="server" Text="&nbsp;&nbsp" ID="spc1" />
            <asp:TextBox ID="txtStatusActionDate" runat="server" Columns="10" MaxLength="10"
            Style="width: 35%;" CssClass="statusActionDate" />
            <cc1:CalendarExtender ID="txtStatusActionDate_CalendarExtender" runat="server" Enabled="True"
            TargetControlID="txtStatusActionDate" />
            <cc1:MaskedEditExtender runat="server" ID="txtStatusActionDate_MaskedEditExtender"
            Enabled="True" Mask="99/99/9999" MaskType="Date" TargetControlID="txtStatusActionDate"
            UserDateFormat="MonthDayYear" />
            <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtStatusActionDate"
            Type="Date" Operator="DataTypeCheck" ErrorMessage="Invalid Date" >     </asp:CompareValidator>          
        </div>
        <div class="quarterWidthDiv">
        <asp:Label runat="server" ID="lblStatusActionAmount" AssociatedControlID="txtStatusActionAmount"
            Text="Amount:" />
            <asp:TextBox ID="txtStatusActionAmount" runat="server" Style="width: 30%;" CssClass="statusActionAmountCssClass" />
        </div>
        <div class="quarterWidthDiv">
            <asp:Label runat="server" ID="lblClaimant" AssociatedControlID="ddlClaimant" Text="Claimant:" />
            <asp:DropDownList ID="ddlClaimant" runat="server" onchange="mailOrStatusActionTextChanged()">
                <asp:ListItem Selected="True" Value="" Text="" />
                <asp:ListItem Value="1" Text="Primary" />
                <asp:ListItem Value="2" Text="Secondary" />
            </asp:DropDownList>
        </div>
    </div>
    <div  class="NinetyNinePercentWide EightPixelBottomMargin" style="margin-top: 2px;">
        <div class="RowHeader">
            <asp:Label runat="server" ID="lblStatusActionReason" AssociatedControlID="txtStatusActionReason"
            Text="Reason:" />
        </div>
        <div style="padding-left: 12px;">
            <asp:TextBox ID="txtStatusActionReason" runat="server" TextMode="MultiLine" Rows="2"
            MaxLength="25" CssClass="StatusReasonWidth" onchange="mailOrStatusActionTextChanged()" />
            <asp:CustomValidator ID="cstmValStatusActionReason" runat="server" ControlToValidate="txtStatusActionReason"
            ErrorMessage="String is too long" />
        </div>
    </div>
</div>

Thank you, Jim in Suwanee, GA

I would like to answer this, but if I could see good code formatting. — Dmytrii Nagirniak
– Dmytrii Nagirniak, Commented Sep 2, 2009 at 5:38

JeremyWeir · Accepted Answer · 2011-09-30 18:29:25Z

4

I don't believe there is a 'enabled' property of form elements, try

$(".statusActionAmountCssClass").attr('disabled', false);

EDIT

Note that the meaning and usage of attr() has changed in jQuery 1.6. While the above will probably still work, make sure to test and understand the difference between attr() and prop()

http://blog.jquery.com/2011/05/03/jquery-16-released/

In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes. Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup . DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.

edited Sep 30, 2011 at 18:29

answered Sep 2, 2009 at 5:50

JeremyWeir

24.4k11 gold badges98 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ken Browning Over a year ago

I think a value of false will still trigger it to be disabled. The disabled attribute would need to be removed with either .removeAttr('disabled') and I think .attr('disabled', null) works too.

James Over a year ago

Works like a champ! Thanks a bunch! if (value == _CASE_RESERVE_ACTION || value == _LEGAL_RESERVE_ACTION) $(".statusActionAmountCssClass").attr('disabled', false); else $(".statusActionAmountCssClass").attr('disabled', true);

JeremyWeir Over a year ago

I only tested it in firefox before answering, it may need to be as Ken Browning said for all other browsers, be sure to test.

Hans Keﬆing · Accepted Answer · 2011-11-22 13:34:48Z

2

$(".statusActionAmountCssClass").attr('disabled', true) won't work

use :$(".statusActionAmountCssClass").attr('disabled', 'disabled') and $(".statusActionAmountCssClass").removeAttr('disabled', 'disabled')

this will work

edited Nov 22, 2011 at 13:34

Hans Keﬆing

39.5k10 gold badges84 silver badges119 bronze badges

answered Nov 18, 2010 at 3:58

navya

312 bronze badges

Comments

Nielsm · Accepted Answer · 2011-11-22 13:00:10Z

0

This is how i do it.

$("input[name='votingmode']").change(function () {
if ($("input[name='votingmode']:checked").val() == '1') {
        $("#plusplus").attr("disabled", "disabled");
        $("#minusminus").attr("disabled", "disabled");
} else if ($("input[name='votingmode']:checked").val() == '3') {
        $("#plusplus").removeAttr("disabled", "disabled");
        $("#minusminus").removeAttr("disabled", "disabled");
});

answered Nov 22, 2011 at 13:00

Nielsm

2891 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

JQuery to enable,disable textbox is not working consistently

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related