Angularjs Enable Disable Button based on Checkbox Selection Example

3 Comments | 1216 Views | Post by: Admin | Tags: Angularjs Enable Disable Button based on Checkbox Selection Example


In this example I will explain you with an example with sample source code Angularjs Enable Disable Button based on Checkbox Selection Example. Here we are going to learn how to use AngularJS to enable or disable button based on checkbox value selection with example.The related solution is very simple By using “ng-disabled” property we can enable or disable button on checkbox selection value in AngularJS.


Step 1: First, We start by creating an Empty asp.net web site in Visual Studio .NET 2013.

Step 2: Add a new web page name sample1.aspx with the following codes:-

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="sample1.aspx.vb" Inherits="sample1" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>www.sourcecodehub.com ==> Angularjs Enable or Disable Button on Checkbox Selection
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('sampleapp', [])
        myApp.controller("expressionController", function ($scope) {
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div data-ng-app="sampleapp" data-ng-controller="expressionController">
        Select Checkbox:
        <input type="checkbox" data-ng-model="chkval" />
        <br />
        <br />
        <input type="button" ng-disabled="chkval" value="Enable/Disable" /><br />
        <br />
    </div>
    </form>
</body>
</html>


Step 3: Run the application by pressing F5

Step 4: Screenshot will be shown below:-

Conclusion,In this tutorial we have learned  To enable or disable button on checkbox selection we need to use ng-disabled property in AngularJS we need to write the code like as shown below

 


Post Comments

if you have some suggestion, question, request on Angularjs Enable Disable Button based on Checkbox Selection Example.

Please use the comment box to express your views.

 

Comments:

loading...