Enable link button in gridview from javascript

Question

The item template in my gridview contains a textbox and a linkbutton. Im trying to enable a link button in my gridview onblur event of textbox from code behind as follows.

txtBox.Attributes.Add("onblur", "EnableSaveLinkButton('" + lnkSave.ClientID + "')");
 <asp:TemplateField HeaderText="Header">
 <ItemTemplate>
 <asp:TextBox ID="txtBox" runat="server" Width="50px" MaxLength="5"></asp:TextBox>
 &nbsp;<asp:LinkButton ID="lnkbtnSave" runat="server" CssClass="mediumFont" CausesValidation="false" CommandName="Save" Enabled="false">Save</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>


function EnableSaveLinkButton(lnkbtnsave){
    jQuery('#' + lnkbtnsave).attr('disabled', '');
//            jQuery("#" + lnkbtnsave).removeAttr("disabled");
    }

I tried both ways but didn't work. Can anyone suggest how to do it correctly? Thanks.

Answer 1

Isn't lnkbtnSave the name of the link control?

txtBox.Attributes.Add("onblur", "EnableLinkButton('" + lnkbtnSave.ClientID + "')");

Instead of setting disabled to empty you must remove the disabled attribute.

jQuery('#' + lnkbtnsave).removeAttr('disabled');

Answer 2

$('#' + lnkbtnsave).removeAttr("disabled"); should work. The question is, are you calling it at the right time? For example did you ensure that the DOM is ready before calling it? Like this:

function EnableSaveLinkButton(lnkbtnsave){
$('#'+ lnkbtnsave).removeAttr("disabled");
};

and please replace this in code behind

lnkbtnSave.Attributes.Add("onblur", "EnableLinkButton(this);");

Answer 3

Try this..

function EnableSaveLinkButton(lnkbtnsave){
    var id = lnkbtnsave.id.toString();
    var i = id.split("_");
    index = i[2].toString();
    document.getElementById('lnkbtnSave' + index).disabled='true';
    }

Answer 4

You can give your text box and link button css classes.And then create a disabled inline style

<asp:TextBox ID="txtBox" runat="server" cssClass="txt" Width="50px" MaxLength="5">   </asp:TextBox>
 &nbsp;<asp:LinkButton ID="lnkbtnSave" runat="server" CssClass="mediumFont lnk disabled" CausesValidation="false" CommandName="Save">Save</asp:LinkButton>

  <style type="text/css">
    .disabled {
        color: grey;
    }
</style>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('.lnk').on('click', function (e) {

            if (jQuery(this).hasClass('disabled')) {
                e.preventDefault();

            }
            else {

                window.location.href = jQuery(this).attr('href');
                jQuery('.lnk').removeClass('disabled');
            }
        });

        jQuery('.txt').on('blur', function () {
            jQuery('.lnk').removeClass('disabled');

        });
    });

    </script>

I have compiled a working example for you here .Tweak it to your needs.