Enable button using checkbox

Question

I see a couple old/er posts on this when I search, but for whatever reason I cannot get any of the code examples to work in my project.

I want to use a checkbox control to enable/disable a submit button so that users have to agree to use terms before being able to register.

Using SQL Server backend, asp.net and C#. I would prefer to use javascript to do this enabling/disabling, but open to anything that works.

At this point I have dropped all attempts for the actual code and hoping someone can assist to come up with something that will work (hence why no javascript below).

asp.net controls:

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

Update 8/5/2016 - I have tried the code in the item that is indicated by multiple people as a duplicate, and it does not work. In the question submitted the checkbox is an HTML item, not asp.net, and the button is not referenced at all. I have tried to change that code around to fit, but nothing is occurring with the button when I check/uncheck the checkbox.

Able to use the below Javascript to do the desired function:

$(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')
        }
    }
});

So, because you've not specified what older posts you've looked at and why they didn't work, you will be getting many duplicate close votes. [edit] your question and provide that information. — Heretic Monkey, Aug 04 '16 at 20:46
See comment added, the duplicate does not work in my project. — Brent Oliver, Aug 05 '16 at 12:40

score 1 · Accepted Answer · answered Sep 16 '16 at 18:25

Used the below 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>

Hugo Nava Kopp · Answer 2 · 2016-08-04T20:57:25.043

The simplest way I would recommend would be to wrap both controls with an UpdatePanel control and set UpdateMode=Conditional and add a Trigger for the CheckedChanged event of the Checkbox. Also, set AutoPostback=True for the Checkbox.

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

The handler method of the OnCheckedChanged on the backend would then have something like this:

btnRegister.Enabled = checkbox1.Checked

I hope this helps, and I hope I've made myself clear.

Used the below Javascript: – Brent Oliver Aug 05 '16 at 13:27 — Brent Oliver, Aug 05 '16 at 13:27

score 0 · Answer 3 · answered Aug 05 '16 at 00:50

0

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

answered Aug 05 '16 at 00:50

vivek kv

406
6
11

This solution changes the button from disabled to enabled and back as requested, but the postback and full refresh of the screen is not optimal. The users of this application are the type likely to think that an error is happening on the postback. Side affect of the postback is that page jumps back to the top of the screen requiring users to scroll down again to hit the register button, and have to reenter the password text boxes (that are not referenced in this post). – Brent Oliver Aug 05 '16 at 12:46

Enable button using checkbox

3 Answers3