Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Enable Disable Textbox on Checkbox Selection or Click Example

Jun 11, 2015
Introduction

Here I will explain how to use
jQuery to enable disable textbox based on checkbox selection / click or jQuery enable disable textbox on checkbox click or jQuery enable disable textbox when checkbox selected / deselected or enable disable textbox on checkbox selection using jQuery with example.

Description:
  
In previous articles I explained
jQuery load more records on button click in repeater, jQuery show asp.net exception message in ajax calls, jQuery check whether radiobutton selected or not, jQuery get radio button selected value by name, jQuery validate radiobuttonlist with example and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to enable or disable textbox based on checkbox selection with example.

To enable or disable textbox based on checkbox selection need to write the code like as shown below


<script type="text/javascript">
$(function () {
$('#chkSelect').change(function () {
var status = this.checked;
if (status)
$('#txtUsername').prop("disabled", false);
else
$('#txtUsername').prop("disabled", true);
})
})
</script>

If you want to check it in complete example you need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Enable or Disable Textbox on Checkbox Selection</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#chkSelect').change(function () {
var status = this.checked;
if (status)
$('#txtUsername').prop("disabled", false);
else
$('#txtUsername').prop("disabled", true);
})
})
</script>
</head>
<body>
<form id="form1">
<div>
Select Checkbox: <input type="checkbox" id="chkSelect" checked="checked" /><br />
Enter UserName:<input type="text" id="txtUsername" />
</div>
</form>
</body>
</html>

Live Demo

For live demo check try to check or uncheck below checkbox to enable or disable textbox


Select Checkbox:
Enter UserName:


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

3 comments :

Anonymous said...

How do i make it to work on mobile browser for android?
It doesn't work on android phone browser.

amey said...
This comment has been removed by the author.
Anonymous said...

Test

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.