This
article will show you how you can enable and disable asp.net
fileupload control on click of checkbox using jquery. In this
when user check the checkbox fileupload
control will become disable and when it uncheck it fileupload
control will become enable.
Some of my
previous articles are as follows: Read
and Show CSV File Data In DataList Using C#.Net in Asp.net, Browse,
Read and Populate or Show or Bind CSV File Data In GridView Using C#.Net in
Asp.net, FileUpload
Control Inside WebGrid To Upload File In Asp.net MVC Using C#.Net, Upload
files and Get Uploaded File Size Using C#.Net,VB.Net in Asp.Net, File
Upload and Displaying Them as Thumbnails in DataList in MVC3 By Using Razor,
C#.Net, Client
Side Validation of File Type or Extention Permited to Upload in Asp.Net Using
Javascript, Restrict
User to Upload File of a Specific Size in Asp.Net Using C#.Net, Restrict
User to Upload Only doc or .docx Using Fileupload in Asp.Net C#.Net.
So for this
article first will create a new asp.net application and add the below html
code.
<form id="form1" runat="server">
<div>
Enable
Or Disable:
<asp:CheckBox ID="CheckBox1"
runat="server" />
</div>
<br />
<div>
File
Upload Control:<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</form>
|
In above code I have added a checkbox and a file upload control. Now add the below code into the header of the page.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#<%=CheckBox1.ClientID %>").click(function () {
var status = $("#<%=CheckBox1.ClientID %>").prop("checked");
if (status == true) {
$("#<%=FileUpload1.ClientID %>").prop('disabled', true);
} else {
$("#<%=FileUpload1.ClientID %>").prop('disabled', false);
}
});
});
</script>
|
In above
code with the help of jquery I have find the status of the checkbox and then on
the bases of the checkbox status enabling and disabling the asp.net file upload
control. Now check the complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication7.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Enable and Disable
Asp.Net Fileupload Control Using jQuery</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#<%=CheckBox1.ClientID %>").click(function () {
var status = $("#<%=CheckBox1.ClientID %>").prop("checked");
if (status == true) {
$("#<%=FileUpload1.ClientID %>").prop('disabled', true);
} else {
$("#<%=FileUpload1.ClientID %>").prop('disabled', false);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enable Or Disable:
<asp:CheckBox ID="CheckBox1"
runat="server" />
</div>
<br />
<div>
File Upload Control:<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</form>
</body>
</html>
|
Now we have
done run the application to check the output.
About the Author
0 comments:
Please let me know your view