Disabling/Enabling of form text boxes on click of checkbox and passing name of the text box as a parameter to...











up vote
0
down vote

favorite












This is a sample code where in I am disabling or enabling the textbox on click of checkbox.






function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}

<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>

</body>





The problem I am facing is that I need to repeat the javascript code for everytime I add a new checkbox and textbox in the form as the name of the checkbox has been hardcoded. How shall I make it dynamic so that once I have added a new textbox with a checkbox it should take it dynamicaaly and enable it on clicking of checkbox










share|improve this question
























  • You tagged it with jquery so you're gonna accept a jquery solution or you want this to remain as plain js?
    – Ryan.Hunt
    Nov 21 at 8:07












  • Actually Javascript
    – Abhay Varma
    Nov 21 at 9:09















up vote
0
down vote

favorite












This is a sample code where in I am disabling or enabling the textbox on click of checkbox.






function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}

<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>

</body>





The problem I am facing is that I need to repeat the javascript code for everytime I add a new checkbox and textbox in the form as the name of the checkbox has been hardcoded. How shall I make it dynamic so that once I have added a new textbox with a checkbox it should take it dynamicaaly and enable it on clicking of checkbox










share|improve this question
























  • You tagged it with jquery so you're gonna accept a jquery solution or you want this to remain as plain js?
    – Ryan.Hunt
    Nov 21 at 8:07












  • Actually Javascript
    – Abhay Varma
    Nov 21 at 9:09













up vote
0
down vote

favorite









up vote
0
down vote

favorite











This is a sample code where in I am disabling or enabling the textbox on click of checkbox.






function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}

<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>

</body>





The problem I am facing is that I need to repeat the javascript code for everytime I add a new checkbox and textbox in the form as the name of the checkbox has been hardcoded. How shall I make it dynamic so that once I have added a new textbox with a checkbox it should take it dynamicaaly and enable it on clicking of checkbox










share|improve this question















This is a sample code where in I am disabling or enabling the textbox on click of checkbox.






function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}

<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>

</body>





The problem I am facing is that I need to repeat the javascript code for everytime I add a new checkbox and textbox in the form as the name of the checkbox has been hardcoded. How shall I make it dynamic so that once I have added a new textbox with a checkbox it should take it dynamicaaly and enable it on clicking of checkbox






function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}

<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>

</body>





function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}

<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>

</body>






javascript jquery html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 at 8:00









Swellar

4,03941838




4,03941838










asked Nov 21 at 7:58









Abhay Varma

333




333












  • You tagged it with jquery so you're gonna accept a jquery solution or you want this to remain as plain js?
    – Ryan.Hunt
    Nov 21 at 8:07












  • Actually Javascript
    – Abhay Varma
    Nov 21 at 9:09


















  • You tagged it with jquery so you're gonna accept a jquery solution or you want this to remain as plain js?
    – Ryan.Hunt
    Nov 21 at 8:07












  • Actually Javascript
    – Abhay Varma
    Nov 21 at 9:09
















You tagged it with jquery so you're gonna accept a jquery solution or you want this to remain as plain js?
– Ryan.Hunt
Nov 21 at 8:07






You tagged it with jquery so you're gonna accept a jquery solution or you want this to remain as plain js?
– Ryan.Hunt
Nov 21 at 8:07














Actually Javascript
– Abhay Varma
Nov 21 at 9:09




Actually Javascript
– Abhay Varma
Nov 21 at 9:09












4 Answers
4






active

oldest

votes

















up vote
1
down vote













This is how you can do with javascript code




var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}

  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





This is how you can do with JQuery code






$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>








share|improve this answer























  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i am doing it with the class name so you can give different name for the textbox but with one common class name
    – Darji Sonali
    Nov 21 at 9:11










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:15










  • OfCourse, You can check it, I have added code for Javascript as well
    – Darji Sonali
    Nov 21 at 10:20


















up vote
0
down vote













You can do it by getting the checkbox change event and getting the next input box to the check box as shown in the code below.






$(function() {
$("input[type=checkbox]").change(function(){

if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);

}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>

</body>








share|improve this answer





















  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • It doesn't effect. Its not working with name its working with its type
    – Hamza Haider
    Nov 21 at 9:08










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14


















up vote
0
down vote













Try this...






$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>

</body>








share|improve this answer



















  • 1




    You can use .prop("disabled", !this.checked) instead of if/else condition
    – Mohammad
    Nov 21 at 8:43












  • thanks @Mohammad , I updated my answer.
    – Sooriya Dasanayake
    Nov 21 at 8:56










  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i have used the class name.
    – Sooriya Dasanayake
    Nov 21 at 9:09










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14


















up vote
0
down vote













This can accept as many checkbox/input as you want, as long as the data-name attribute of the checkbox is the same as the name attribute of the input element.



I used querySelectorAll('input[class="checker"]'), but this can be also replaced with getElementsByClassName('checker') (since I'm selecting through class)



I'm sure this can still be optimized, but I did this to show the connection between the checkbox and the input






var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}

function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>








share|improve this answer























  • Please can you help me in javascript
    – Abhay Varma
    Nov 21 at 9:09










  • @AbhayVarma Check again
    – Swellar
    Nov 21 at 9:33











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407508%2fdisabling-enabling-of-form-text-boxes-on-click-of-checkbox-and-passing-name-of-t%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























4 Answers
4






active

oldest

votes








4 Answers
4






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
1
down vote













This is how you can do with javascript code




var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}

  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





This is how you can do with JQuery code






$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>








share|improve this answer























  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i am doing it with the class name so you can give different name for the textbox but with one common class name
    – Darji Sonali
    Nov 21 at 9:11










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:15










  • OfCourse, You can check it, I have added code for Javascript as well
    – Darji Sonali
    Nov 21 at 10:20















up vote
1
down vote













This is how you can do with javascript code




var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}

  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





This is how you can do with JQuery code






$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>








share|improve this answer























  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i am doing it with the class name so you can give different name for the textbox but with one common class name
    – Darji Sonali
    Nov 21 at 9:11










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:15










  • OfCourse, You can check it, I have added code for Javascript as well
    – Darji Sonali
    Nov 21 at 10:20













up vote
1
down vote










up vote
1
down vote









This is how you can do with javascript code




var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}

  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





This is how you can do with JQuery code






$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>








share|improve this answer














This is how you can do with javascript code




var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}

  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





This is how you can do with JQuery code






$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>








var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}

  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}

  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>





$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 at 10:17

























answered Nov 21 at 8:27









Darji Sonali

463




463












  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i am doing it with the class name so you can give different name for the textbox but with one common class name
    – Darji Sonali
    Nov 21 at 9:11










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:15










  • OfCourse, You can check it, I have added code for Javascript as well
    – Darji Sonali
    Nov 21 at 10:20


















  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i am doing it with the class name so you can give different name for the textbox but with one common class name
    – Darji Sonali
    Nov 21 at 9:11










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:15










  • OfCourse, You can check it, I have added code for Javascript as well
    – Darji Sonali
    Nov 21 at 10:20
















The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 at 9:07




The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 at 9:07












i am doing it with the class name so you can give different name for the textbox but with one common class name
– Darji Sonali
Nov 21 at 9:11




i am doing it with the class name so you can give different name for the textbox but with one common class name
– Darji Sonali
Nov 21 at 9:11












Please can you help me the same code in javascript
– Abhay Varma
Nov 21 at 9:15




Please can you help me the same code in javascript
– Abhay Varma
Nov 21 at 9:15












OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 at 10:20




OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 at 10:20












up vote
0
down vote













You can do it by getting the checkbox change event and getting the next input box to the check box as shown in the code below.






$(function() {
$("input[type=checkbox]").change(function(){

if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);

}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>

</body>








share|improve this answer





















  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • It doesn't effect. Its not working with name its working with its type
    – Hamza Haider
    Nov 21 at 9:08










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14















up vote
0
down vote













You can do it by getting the checkbox change event and getting the next input box to the check box as shown in the code below.






$(function() {
$("input[type=checkbox]").change(function(){

if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);

}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>

</body>








share|improve this answer





















  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • It doesn't effect. Its not working with name its working with its type
    – Hamza Haider
    Nov 21 at 9:08










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14













up vote
0
down vote










up vote
0
down vote









You can do it by getting the checkbox change event and getting the next input box to the check box as shown in the code below.






$(function() {
$("input[type=checkbox]").change(function(){

if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);

}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>

</body>








share|improve this answer












You can do it by getting the checkbox change event and getting the next input box to the check box as shown in the code below.






$(function() {
$("input[type=checkbox]").change(function(){

if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);

}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>

</body>








$(function() {
$("input[type=checkbox]").change(function(){

if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);

}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>

</body>





$(function() {
$("input[type=checkbox]").change(function(){

if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);

}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>

</body>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 21 at 8:24









Hamza Haider

600314




600314












  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • It doesn't effect. Its not working with name its working with its type
    – Hamza Haider
    Nov 21 at 9:08










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14


















  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • It doesn't effect. Its not working with name its working with its type
    – Hamza Haider
    Nov 21 at 9:08










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14
















The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 at 9:07




The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 at 9:07












It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 at 9:08




It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 at 9:08












Please can you help me the same code in javascript
– Abhay Varma
Nov 21 at 9:14




Please can you help me the same code in javascript
– Abhay Varma
Nov 21 at 9:14










up vote
0
down vote













Try this...






$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>

</body>








share|improve this answer



















  • 1




    You can use .prop("disabled", !this.checked) instead of if/else condition
    – Mohammad
    Nov 21 at 8:43












  • thanks @Mohammad , I updated my answer.
    – Sooriya Dasanayake
    Nov 21 at 8:56










  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i have used the class name.
    – Sooriya Dasanayake
    Nov 21 at 9:09










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14















up vote
0
down vote













Try this...






$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>

</body>








share|improve this answer



















  • 1




    You can use .prop("disabled", !this.checked) instead of if/else condition
    – Mohammad
    Nov 21 at 8:43












  • thanks @Mohammad , I updated my answer.
    – Sooriya Dasanayake
    Nov 21 at 8:56










  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i have used the class name.
    – Sooriya Dasanayake
    Nov 21 at 9:09










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14













up vote
0
down vote










up vote
0
down vote









Try this...






$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>

</body>








share|improve this answer














Try this...






$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>

</body>








$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>

</body>





$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >

<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>

</body>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 at 8:55

























answered Nov 21 at 8:22









Sooriya Dasanayake

80347




80347








  • 1




    You can use .prop("disabled", !this.checked) instead of if/else condition
    – Mohammad
    Nov 21 at 8:43












  • thanks @Mohammad , I updated my answer.
    – Sooriya Dasanayake
    Nov 21 at 8:56










  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i have used the class name.
    – Sooriya Dasanayake
    Nov 21 at 9:09










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14














  • 1




    You can use .prop("disabled", !this.checked) instead of if/else condition
    – Mohammad
    Nov 21 at 8:43












  • thanks @Mohammad , I updated my answer.
    – Sooriya Dasanayake
    Nov 21 at 8:56










  • The name of all textboxes are different. Then how will you do it
    – Abhay Varma
    Nov 21 at 9:07










  • i have used the class name.
    – Sooriya Dasanayake
    Nov 21 at 9:09










  • Please can you help me the same code in javascript
    – Abhay Varma
    Nov 21 at 9:14








1




1




You can use .prop("disabled", !this.checked) instead of if/else condition
– Mohammad
Nov 21 at 8:43






You can use .prop("disabled", !this.checked) instead of if/else condition
– Mohammad
Nov 21 at 8:43














thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 at 8:56




thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 at 8:56












The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 at 9:07




The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 at 9:07












i have used the class name.
– Sooriya Dasanayake
Nov 21 at 9:09




i have used the class name.
– Sooriya Dasanayake
Nov 21 at 9:09












Please can you help me the same code in javascript
– Abhay Varma
Nov 21 at 9:14




Please can you help me the same code in javascript
– Abhay Varma
Nov 21 at 9:14










up vote
0
down vote













This can accept as many checkbox/input as you want, as long as the data-name attribute of the checkbox is the same as the name attribute of the input element.



I used querySelectorAll('input[class="checker"]'), but this can be also replaced with getElementsByClassName('checker') (since I'm selecting through class)



I'm sure this can still be optimized, but I did this to show the connection between the checkbox and the input






var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}

function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>








share|improve this answer























  • Please can you help me in javascript
    – Abhay Varma
    Nov 21 at 9:09










  • @AbhayVarma Check again
    – Swellar
    Nov 21 at 9:33















up vote
0
down vote













This can accept as many checkbox/input as you want, as long as the data-name attribute of the checkbox is the same as the name attribute of the input element.



I used querySelectorAll('input[class="checker"]'), but this can be also replaced with getElementsByClassName('checker') (since I'm selecting through class)



I'm sure this can still be optimized, but I did this to show the connection between the checkbox and the input






var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}

function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>








share|improve this answer























  • Please can you help me in javascript
    – Abhay Varma
    Nov 21 at 9:09










  • @AbhayVarma Check again
    – Swellar
    Nov 21 at 9:33













up vote
0
down vote










up vote
0
down vote









This can accept as many checkbox/input as you want, as long as the data-name attribute of the checkbox is the same as the name attribute of the input element.



I used querySelectorAll('input[class="checker"]'), but this can be also replaced with getElementsByClassName('checker') (since I'm selecting through class)



I'm sure this can still be optimized, but I did this to show the connection between the checkbox and the input






var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}

function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>








share|improve this answer














This can accept as many checkbox/input as you want, as long as the data-name attribute of the checkbox is the same as the name attribute of the input element.



I used querySelectorAll('input[class="checker"]'), but this can be also replaced with getElementsByClassName('checker') (since I'm selecting through class)



I'm sure this can still be optimized, but I did this to show the connection between the checkbox and the input






var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}

function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>








var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}

function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>





var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}

function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 at 9:32

























answered Nov 21 at 8:14









Swellar

4,03941838




4,03941838












  • Please can you help me in javascript
    – Abhay Varma
    Nov 21 at 9:09










  • @AbhayVarma Check again
    – Swellar
    Nov 21 at 9:33


















  • Please can you help me in javascript
    – Abhay Varma
    Nov 21 at 9:09










  • @AbhayVarma Check again
    – Swellar
    Nov 21 at 9:33
















Please can you help me in javascript
– Abhay Varma
Nov 21 at 9:09




Please can you help me in javascript
– Abhay Varma
Nov 21 at 9:09












@AbhayVarma Check again
– Swellar
Nov 21 at 9:33




@AbhayVarma Check again
– Swellar
Nov 21 at 9:33


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407508%2fdisabling-enabling-of-form-text-boxes-on-click-of-checkbox-and-passing-name-of-t%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Berounka

Sphinx de Gizeh

Different font size/position of beamer's navigation symbols template's content depending on regular/plain...