By 07/02/2014 19 Comments

How To Use CheckBox to Conditionally Enable or Disable controls using jQuery

Enable and disable asp.net control conditionally

  • For instance we have a website about online registration, it has a checkbox with accept term and condition text, we want that if user does not check on check box the button will remains disables but user checks on the checkbox ¬†button will be enable
  • It can be achieved in asp.net using JQuery

Following code describes that for us in asp.net using JQuery

In this simple example user can enable/disable any control through clicking check box.

jQuery Code snippet

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage

            var $Submitbtn = $('[id$="TT_button"]'); // get the button control and assign into a variable
            var $checkbox = $('[id$="TT_Checkbox"]'); // get checkbox control, assign it into a variable

            // check on page load
            checkChecked($checkbox);

            $checkbox.click(function () { // when user clicks on checkbox an click event will be triggered
                checkChecked($checkbox); // call checkChecked() function, pass checkbox to the function as an argument
            });

            function checkChecked(chkBox) { // this function will be called, pass one parameter checkbox
                if (chkBox.is(":checked")) { // checks if that checkbox is checked using is() method
                    $Submitbtn.removeAttr('disabled'); // submit button control will be enabled using removeAttr() method
                } else { // otherwise 
                    $Submitbtn.attr('disabled', 'disabled'); // if checkbox is not checked, disabled the submit button
                }
            }

        });

    </script>

ASP.NET Code snippet

<!--- Following code renders checkbox and a button control on browser --->

<asp:Label runat="server" Text="Click on the Checkbox to Enable/Disable the Button control"></asp:Label>
        <br/> <br/>
        <asp:CheckBox ID="TT_Checkbox" runat="server" Text="Check To Toggle the Enabled status of the Button" />
        <br /><br />
        <asp:Button ID="TT_button" runat="server" Text="Submit"/>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .