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.
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 Email
|
|||
3 comments :
How do i make it to work on mobile browser for android?
It doesn't work on android phone browser.
Test
Note: Only a member of this blog may post a comment.