CODEWITHSUNDEEP
jqueryasp.net
kalls
kalls

Reputation: 2855

Jquery to enable and disable a Asp.net button

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.

Upvotes: 2

Views: 27048

Answers (4)

Ng&#244; Đức Tuấn
Ng&#244; Đức Tuấn

Reputation: 71

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

Upvotes: 2

Paul Gorbas
Paul Gorbas

Reputation: 1792

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>

Upvotes: 5

tvanfosson
tvanfosson

Reputation: 532435

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>

Upvotes: 1

SLaks
SLaks

Reputation: 887255

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.

Upvotes: 0

Related Questions