使用复选框启用按钮

本文关键字:按钮 启用 复选框 | 更新日期: 2023-09-27 18:01:05

当我搜索时,我看到了一些关于这方面的旧帖子,但无论出于什么原因,我都无法在我的项目中获得任何代码示例。

我想使用复选框控件来启用/禁用提交按钮,这样用户在注册之前必须同意使用条款。

使用SQL Server后端、asp.net和C#。我更喜欢使用javascript来启用/禁用,但对任何有效的东西都开放。

在这一点上,我已经放弃了对实际代码的所有尝试,并希望有人能帮助我想出一些可行的东西(因此,为什么下面没有javascript(。

asp.net控件:

<div>
 <asp:CheckBox ID="checkbox1" runat="server" Text="I Agree" Checked="false" />
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <asp:Button runat="server" ID="btnRegister" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" Enabled="false"/>
        </div>
    </div>

更新8/5/2016-我已经在项目中尝试了由多人指示为重复的代码,但它不起作用。在提交的问题中,复选框是一个HTML项目,而不是asp.net,并且按钮根本没有被引用。我曾尝试更改该代码以适应,但当我选中/取消选中复选框时,按钮没有发生任何变化。

能够使用以下Javascript来完成所需的功能:

$(function () {
    var $btn = $(":submit[id$=btnRegister]");
    var $chk = $(":input:CheckBox[id$=checkbox1]");
    // check on page load
    checkChecked($chk);
    $chk.click(function () {
        checkChecked($chk);
    });
    function checkChecked(chkBox) {
        if ($chk.is(':checked')) {
            $btn.removeAttr('disabled');
        }
        else {
            $btn.attr('disabled', 'disabled')
        }
    }
});

使用复选框启用按钮

使用以下Javascript:

<script type="text/javascript" > $(function () { var $btn = $(":submit[id$=btnRegister]"); 
var $chk = $(":input:CheckBox[id$=checkbox1]"); 
// check on page load checkChecked($chk); $chk.click(function () { checkChecked($chk); });
 function checkChecked(chkBox) { if ($chk.is(':checked')) { $btn.removeAttr('disabled'); } 
else { $btn.attr('disabled', 'disabled') } } }); 
</script> 

我建议最简单的方法是用UpdatePanel控件包装这两个控件,并设置UpdateMode=Conditional并为Checkbox的CheckedChanged事件添加Trigger。此外,为复选框设置AutoPostback=True

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="checkbox1" EventName="CheckedChanged " />
</Triggers>
        <ContentTemplate>
<div>
<asp:CheckBox ID="checkbox1" runat="server" OnCheckedChanged="Check_Clicked" AutoPostback = "True" Text="I Agree" Checked="false" />
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <asp:Button runat="server" ID="btnRegister" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" Enabled="false"/>
    </div>
</div>
</ContentTemplate>
</asp:UpdatePanel>

后端OnCheckedChanged的处理程序方法将具有如下内容:

btnRegister.Enabled = checkbox1.Checked

我希望这能有所帮助,我希望我已经把自己说清楚了。

<div>
    <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" /><br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
</div>
protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Enabled = false;
    }
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
    {
        Button1.Enabled = CheckBox1.Checked;
    }