How to enable textbox in javascript on button click

How to enable disable textbox when radio button selected using javascript and Jquery
Example-1. Enable Disable Textbox based on Radio Button selection using Jquery
- HTML Code
- Jquery Code
Example-2. Enable Disable Textbox based on Radio Button selection using Javascript
- HTML Code
- Javascript Code
Conclusion
See Also
- Download Javascript form validation
- How to show and hide div elements based on dropdown selection

Table of Contents Show

How to enable disable textbox when radio button selected using javascript and Jquery
Example-1. Enable Disable Textbox based on Radio Button selection using Jquery
Jquery Code
Example-2. Enable Disable Textbox based on Radio Button selection using Javascript
Javascript Code
Download Javascript form validation
How to show and hide div elements based on dropdown selection
How do I GREY out a TextBox in JavaScript?
How do I disable input on click?
What is TextBox in JavaScript?
How do I disable a TextBox?

How to enable disable textbox when radio button selected using javascript and Jquery

In this tutorial, we will explain How to enable disable textbox when radio button selected using javascript and jquery with a live example.

While designing the HTML form some times we require an option to enable disable textbox field when the user clicks or select the radio button.

Here in this example, We will create a simple HTML form with 3 radio buttons and one textbox field and using jQuery the click() function to enable disable the textbox field.

Example-1. Enable Disable Textbox based on Radio Button selection using Jquery

HTML Code

The below HTML codes to create a simple form with radio buttons and Textbox.

English</div>

Hindi </div>

Other Language</div>

</div>

<label>Other Language</label>

</div>

</div>

</form>

</div>

Jquery Code

In the below code the Jquery click function will enable disable the textbox field on radio button selection.

Download Jquery Library

$("input[name='subject']").click(function(){

$("#otherlang").prop("disabled",true);

$('#otherlang').val("");

if($(this).hasClass('otherLang')){

$("#otherlang").prop("disabled",false);

}

});

</script><gwmw style="display:none;"><gwmw style="display:none;"></gwmw></gwmw>

Example-2. Enable Disable Textbox based on Radio Button selection using Javascript

HTML Code

The following HTML codes used to creating the simple HTML form.

English</div>

Hindi</div>

Other Language</div>

</div>

<label>Other Language</label>

</div>

</div>

</form>

</div>

Javascript Code

The following javascript code is used to enable, disable the textbox based on the radio button is selected (checked) or unselected (unchecked)

functionEnableDisableTB(){

varothers= document.getElementById("others");

varotherlan=document.getElementById("otherlan");

otherlan.disabled =others.checked?false:true;

otherlan.value="";

if (!otherlan.disabled){

otherlan.focus();

}

</script>

Conclusion

We explained How to enable disable textbox when radio button selected or checked using jQuery and Javascript. Hope you like it so please like and share.