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

Disable textbox using jquery

Condition:
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.

Steps:

1. Include the jquery file
2. Create the form
->

       
Event Title:
Description:
ChooseSingle EventRange Event
Date:
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

      $("#eventselectone").click(function(){
			   $("input:text[name='edate']").removeAttr("disabled");
			   $("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


   
   -form-
         -table-
    		
        	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