Jquery to enable and disable a Asp.net button

Question

I have a <asp:Button ID="BtnAddCart" runat="server" Text="Place Order" Width="147px" onclick="BtnAddCart_Click" Enabled="false"/>

and a checkbox column and checkbox header on a gridview. on the header you select the checkbox all items on the grid are selected. If you uncheck the header checkbox the items on the grid are un selected.

here is the Jquery

  <script type="text/javascript">
    $(document).ready(function () {
        var chkBox = $("input[id$='ChkAll']");
        chkBox.click(
           function () {
               $("#MainContent_ProductGrid INPUT[type='checkbox']")
             .attr('checked', chkBox
              .is(':checked'));
               $("#MainContent_BtnAddCart INPUT[type='submit']").removeAttr('disabled');
           });
        // Uncheck      
        $("#MainContent_ProductGrid INPUT[type='checkbox']").click(
                    function (e) {
                        if (!$(this)[0].checked) {
                            chkBox.attr("checked", false);
                        }
                        $("#MainContent_BtnAddCart INPUT[type='submit']").attr('disabled', 'disabled');

                    });
    });
</script>

why is the button not getting enabled and disabled.

Paul Gorbas · Accepted Answer · 2012-05-11 20:50:36Z

Just for sake of completeness - here is how to toggle asp button on and off. In This example I default the button to disabled:

In .aspx

<asp:Button ID="btnNext" runat="server" Text="Next" CssClass="cssBtnNext_Disabled" Enabled="false" />

In jQuery enabled javaScript:

<script src="/js/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    $().ready(function()
    {
       var btnNext = $("#<%= btnNext.ClientID %>"); // get the ASP mangled id//$("#btnNext");
       btnNext.click(NextClicked);

       function NextClicked()
       {
          alert("NextClicked Fired!");
       }

       ToggleButtonEnable( IsEnabled )//IsEnabled is true or false
       { 
           if (IsEnabled )
           {//was disabled, now enable
          btnNext.removeAttr("disabled"); //enable button
          btnNext.attr("class", "cssBtnNext_Enabled");
           }
           else
           {//was enabled, now disable
              btnNext.attr("disabled", "disabled"); //disable button
              btnNext.attr("class", "cssBtnNext_Disabled");
           }
       }


}

</script>

Ngô Đức Tuấn · Accepted Answer · 2015-08-19 13:22:59Z

2

I can fix your problems: $(".classButton").prop('disabled','disabled');

answered Aug 19, 2015 at 13:22

Ngô Đức Tuấn

716 bronze badges

1 Comment

Ngô Đức Tuấn Over a year ago

and remove disabled: $(".classButton").prop('disabled', '');

tvanfosson · Accepted Answer · 2011-04-11 13:49:36Z

1

You are missing a parenthesis in your click handler for the checkbox. Is that a typo? I'd probably rewrite it to accommodate setting button visibility both for check all and when any checkbox is clicked, sharing the same code. Note that if you use @SLaks suggestion you may be able to simplify the selectors for the grid and button. I've used the "endsWith" selector in all cases to deal with ASP.NET name mangling.

<script type="text/javascript">
    $(document).ready(function () {
        var $chkAll = $('input[id$="ChkAll"]');
        var $boxes = $('[id$="ProductGrid"] input:checkbox').not($chkAll);

        // update all checkboxes and submit button when check all is toggled
        $chkAll.click( function() {
           if ($chkAll.is(':checked')) {
              $boxes.attr('checked','checked');
           }
           else {
              $boxes.attr('checked','');
           }
           setButtonState();
        });

        // when any checkbox is clicked, update submit button state
        $boxes.click( function() {
           setButtonState();
        });

        // if any checkbox is checked, button is enabled, else disabled.
        function setButtonState()
        {
            var state = 'disabled';
            $boxes.each( function() {
               if ($(this).is(':checked')) {
                  state = '';
                  return false;
               }
            });
            $('[id$="BtnAddCart"]').attr('disabled',state);
        }

    });
</script>

edited Apr 11, 2011 at 13:49

answered Apr 10, 2011 at 16:37

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

4 Comments

kalls Over a year ago

I tried your code sample on a test app and it is giving a jQuery exception.

kalls Over a year ago

jquery-1.4.1.min.js is what I am using.

kalls Over a year ago

I am marking this as answer. It includes to use Slaks suggestion as well. However,in my machine I have to make some minor changes.I used var $boxes = $("#ProductGrid INPUT[type='checkbox']").not($chkAll); and $boxes click function the parenthesis should be closed. Thanks so much for both(Slaks and tvanfosson) for your help.

tvanfosson Over a year ago

@kalls - sorry for the typo -- and the input:checkbox shouldn't have had brackets around it. I've removed those, too. You might want to try that or simply :checkbox.

SLaks · Accepted Answer · 2011-04-10 16:21:45Z

0

By default, ASP.Net generates its own IDs.

Set ClientIdMode="Static" for the button to force it to use your ID.
Alternatively, write <%= BtnAddCart.ClientID %> to get the generated ID.

answered Apr 10, 2011 at 16:21

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

1 Comment

kalls Over a year ago

Tried ClientIDMode = "Static" then I was able to see view source on IE and it showed the ID correctly which is BtnAddCart. I couldn't figure it out!! the checkbox part is working. It is just the button

Collectives™ on Stack Overflow

Jquery to enable and disable a Asp.net button

4 Answers 4

Comments

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related