Friday, May 30, 2014

Enable a button on check box checked without page refresh

In this tutorial I will show you how to enable a button on checking of a check box without using any update panel.  This is i found when I wanted to enable a register button in an registration form using update panel and the Css of the button was not working when it is disable.

So lets create a new project. And add a new check box and a button into a new web form.


<asp:CheckBox ID="chkTermsCondition" runat="server" Text="Check now"/></a>
                        
<asp:Button ID="btnRegister" runat="server" Text="Register" 
onclick="btnRegister_Click" class="contact-button" />

Now in the head section add a java script code to do the action.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script  type="text/javascript" >
    $(function () {
        var $btn = $(":submit[id$=btnRegister]");
        var $chk = $(":input:CheckBox[id$=chkTermsCondition]");
        // 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>

Add Jquery plugin to your project or add Google, Jquery online plugin. And now run the project and test. Enjoy...  :)

0 comments:

Post a Comment

Follow by Email

Popular Posts

Pageviews