Introduction
This article explains how to disable a button on the click of another button.
In many of our applications we provide many types of buttons on the same application but we don't want the user to click other buttons on any specific condition, like if we have a page on which the user can fill in some entries and can save it, on the same application we have provided a button that when clicked the data will be deleted. If the user however has not saved the data then what will be deleted? So, in that case we would like to disable the delete button so that the user can't click on that.
Step 1
First of all I have created a simple application with some fields to be filled in and the user can save the data.
![disable button on click of other button]()
Then I provided two buttons, one for saving the data and another for deleting the data.
<input type="button" runat="server" id="saveData" value="Save" />
<input type="button" runat="server" id="dltData" value="Delete" />
Step 2
Now we will work on how to disable a button on the click of another, for that we will use jQuery and the code is as follows:
<script src="jquery-1.9.1.js"></script>
<script>
$(function () {
var clicked = false;
var first = $('#saveData');
var second = $('#dltData');
first.on('click', function () {
clicked = !clicked;
if (clicked)
second.attr('disabled', 'disabled');
else
second.removeAttr('disabled');
});
second.on('click', function () {
clicked = !clicked;
if (clicked)
first.attr('disabled', 'disabled');
else
first.removeAttr('disabled');
});
});
</script>
Here first I have added an external file, jquery-1.9.1.js, you can get it by downloading the Zip file present at the start of this article.
Then I have created a function in which three variables are used, two for the Buttons and one for their click. I have provided the ID of the buttons in the first and second variable.
If the first button is found to be clicked then the second button will be disabled and if the second button is clicked then the first button will be disabled.
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js"></script>
<script>
$(function () {
var clicked = false;
var first = $('#saveData');
var second = $('#dltData');
first.on('click', function () {
clicked = !clicked;
if (clicked)
second.attr('disabled', 'disabled');
else
second.removeAttr('disabled');
});
second.on('click', function () {
clicked = !clicked;
if (clicked)
first.attr('disabled', 'disabled');
else
first.removeAttr('disabled');
});
});
$(function () {
var clear=$('#dltData');
clear.on('click', function () {
document.getElementById("form1").reset();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ForeColor="Red" ID="lblSave" Text=""></asp:Label>
<br />
<asp:Label runat="server" ID="lblFirst" ForeColor="Blue" Text="First Name"></asp:Label>
<asp:TextBox runat="server" ID="txtFirst"></asp:TextBox>
<br />
<asp:Label runat="server" ID="lblSecond" ForeColor="Blue" Text="Last Name"></asp:Label>
<asp:TextBox runat="server" ID="txtSecond"></asp:TextBox>
<br />
<br />
<asp:Label runat="server" ID="lblFifth" ForeColor="Blue" Text="College"></asp:Label>
<asp:TextBox runat="server" ID="txtFifth"></asp:TextBox>
<br />
<asp:Label runat="server" ID="lblSixth" ForeColor="Blue" Text="Branch"></asp:Label>
<asp:TextBox runat="server" ID="txtSixth"></asp:TextBox>
<input type="button" runat="server" id="saveData" value="Save" />
<input type="button" runat="server" id="dltData" value="Delete" />
</div>
</form>
</body>
</html>
Output
Now your application is ready and you can debug it to see the application.
On running the code you will get an output like this one:
![disable button on click of other button]()
Now if you enter your data and click on the "Save" button then your data will be saved and the "Delete" button will be disabled.
![disable button on click of other button]()
Similarly if I click on the "Delete" button then the data will be deleted and the "Save" button will be disabled.
![disable button on click of other button]()