Category Archives: texbox enable or dsable with radio button using jquery

Disable textbox using jquery

I have two radio button with the same name . On click(event) on the first radio button i need to enable the first textbox and Similarly On click(event) on the second radio button i need to disable the first and enable the second textbox.


1. Include the jquery file
2. Create the form

Event Title:
ChooseSingle EventRange Event
Btn: ||

3. Fire the action on click event or change event.
-> On document ready disable both the text box

jQuery(document).ready(function () {       //$(function(){.. )};
$("input:text[name='edate']").attr("disabled", true);
	   $("input:text[name='edatefrom']").attr("disabled", true);
	   $("input:text[name='edateto']").attr("disabled", true);


-> On click on the first radio button Enable the first textbox and disable the others

			   $("input:text[name='edateto']").attr("disabled", true);
	           $("input:text[name='edatefrom']").attr("disabled", true);

->Simlarly on click on the second radio button Disable the first textbox and viceversa.
Sample Code

        	Chooseinput type="radio" name="eventselect" id="eventselectone"  - Single Event  -  input type="radio" name="eventselect" id="eventselectrange"   - Range Event

        	Date: - input type="text" name="edate"  class="one" value="" - 
        	Btn: -input type="text" name="edateto" class="one" value=""    ||  -input type="text" name="edatefrom" class="one" value="" -
        	 -input type="submit" name="add_events" value="++ Event" -


Similar Example Click Me
Similar Example