Jquery 启用和禁用 Asp.net 按钮

Posted 2023-03-22

【中文标题】Jquery 启用和禁用 Asp.net 按钮

【英文标题】：Jquery to enable and disable a Asp.net button

【发布时间】：2011-04-10 16:18:21

【问题描述】：

我有一个 <asp:Button ID="BtnAddCart" runat="server" Text="Place Order" Width="147px" onclick="BtnAddCart_Click" Enabled="false"/>

以及gridview 上的复选框列和复选框标题。 在标题上，您选中复选框，网格上的所有项目都被选中。如果取消选中标题复选框，则网格上的项目不会被选中。

这里是 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>

为什么按钮没有启用和禁用。

【参考方案1】：

只是为了完整起见 - 这是打开和关闭 asp 按钮的方法。 在此示例中，我将按钮默认为禁用：

在 .aspx 中

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

在启用 jQuery 的 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>

【参考方案2】：

我可以解决您的问题： $(".classButton").prop('disabled','disabled');

【讨论】：

并删除 disabled: $(".classButton").prop('disabled', '');

【参考方案3】：

您在复选框的单击处理程序中缺少括号。那是错字吗？我可能会重写它以适应设置按钮可见性以检查全部和单击任何复选框时共享相同的代码。请注意，如果您使用@SLaks 建议，您可以简化网格和按钮的选择器。我在所有情况下都使用“endsWith”选择器来处理 ASP.NET 名称修改。

<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>

【讨论】：

我在一个测试应用程序上尝试了你的代码示例，它给出了一个 jQuery 异常。

jquery-1.4.1.min.js 是我正在使用的。

我将此标记为答案。它还包括使用 Slaks 建议。但是，在我的机器上我必须做一些小的改动。我使用了 var $boxes = $("#ProductGrid INPUT[type='checkbox']").not($chkAll);和 $boxes 点击函数括号应该被关闭。非常感谢（Slaks 和 tvanfosson）的帮助。

@kalls - 抱歉打错了 - 输入：复选框不应该有括号。我也删除了那些。您可能想尝试一下，或者干脆:checkbox。

【参考方案4】：

默认情况下，ASP.Net 会生成自己的 ID。

为按钮设置 ClientIdMode="Static" 以强制它使用您的 ID。 或者，写<%= BtnAddCart.ClientID %>获取生成的ID。

【讨论】：

试过 ClientIDMode = "Static" 然后我能够在 IE 上看到查看源代码，它正确显示了 ID，即 BtnAddCart。我想不通！！复选框部分正在工作。它只是一个按钮