Disabling/Enabling of form text boxes on click of checkbox and passing name of the text box as a parameter to...
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
javascript jquery html
add a comment |
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
javascript jquery html
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 '18 at 8:07
Actually Javascript
– Abhay Varma
Nov 21 '18 at 9:09
add a comment |
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
javascript jquery html
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
javascript jquery html
edited Nov 21 '18 at 8:00
Carl Binalla
4,16642040
4,16642040
asked Nov 21 '18 at 7:58
Abhay VarmaAbhay Varma
274
274
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 '18 at 8:07
Actually Javascript
– Abhay Varma
Nov 21 '18 at 9:09
add a comment |
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 '18 at 8:07
Actually Javascript
– Abhay Varma
Nov 21 '18 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 '18 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 '18 at 8:07
Actually Javascript
– Abhay Varma
Nov 21 '18 at 9:09
Actually Javascript
– Abhay Varma
Nov 21 '18 at 9:09
add a comment |
4 Answers
4
active
oldest
votes
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>
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 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 '18 at 9:11
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:15
OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 '18 at 10:20
add a comment |
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>
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 '18 at 9:08
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
1
You can use.prop("disabled", !this.checked)
instead ofif/else
condition
– Mohammad
Nov 21 '18 at 8:43
thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 '18 at 8:56
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
i have used the class name.
– Sooriya Dasanayake
Nov 21 '18 at 9:09
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
Please can you help me in javascript
– Abhay Varma
Nov 21 '18 at 9:09
@AbhayVarma Check again
– Carl Binalla
Nov 21 '18 at 9:33
add a comment |
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 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 '18 at 9:11
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:15
OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 '18 at 10:20
add a comment |
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>
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 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 '18 at 9:11
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:15
OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 '18 at 10:20
add a comment |
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>
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>
edited Nov 21 '18 at 10:17
answered Nov 21 '18 at 8:27
Darji SonaliDarji Sonali
363
363
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 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 '18 at 9:11
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:15
OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 '18 at 10:20
add a comment |
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 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 '18 at 9:11
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:15
OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 '18 at 10:20
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 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 '18 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 '18 at 9:11
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:15
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:15
OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 '18 at 10:20
OfCourse, You can check it, I have added code for Javascript as well
– Darji Sonali
Nov 21 '18 at 10:20
add a comment |
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>
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 '18 at 9:08
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 '18 at 9:08
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
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>
answered Nov 21 '18 at 8:24
Hamza HaiderHamza Haider
664516
664516
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 '18 at 9:08
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 '18 at 9:08
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 '18 at 9:08
It doesn't effect. Its not working with name its working with its type
– Hamza Haider
Nov 21 '18 at 9:08
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
1
You can use.prop("disabled", !this.checked)
instead ofif/else
condition
– Mohammad
Nov 21 '18 at 8:43
thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 '18 at 8:56
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
i have used the class name.
– Sooriya Dasanayake
Nov 21 '18 at 9:09
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
1
You can use.prop("disabled", !this.checked)
instead ofif/else
condition
– Mohammad
Nov 21 '18 at 8:43
thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 '18 at 8:56
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
i have used the class name.
– Sooriya Dasanayake
Nov 21 '18 at 9:09
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
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>
edited Nov 21 '18 at 8:55
answered Nov 21 '18 at 8:22
Sooriya DasanayakeSooriya Dasanayake
8921412
8921412
1
You can use.prop("disabled", !this.checked)
instead ofif/else
condition
– Mohammad
Nov 21 '18 at 8:43
thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 '18 at 8:56
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
i have used the class name.
– Sooriya Dasanayake
Nov 21 '18 at 9:09
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
1
You can use.prop("disabled", !this.checked)
instead ofif/else
condition
– Mohammad
Nov 21 '18 at 8:43
thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 '18 at 8:56
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
i have used the class name.
– Sooriya Dasanayake
Nov 21 '18 at 9:09
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
1
1
You can use
.prop("disabled", !this.checked)
instead of if/else
condition– Mohammad
Nov 21 '18 at 8:43
You can use
.prop("disabled", !this.checked)
instead of if/else
condition– Mohammad
Nov 21 '18 at 8:43
thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 '18 at 8:56
thanks @Mohammad , I updated my answer.
– Sooriya Dasanayake
Nov 21 '18 at 8:56
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
The name of all textboxes are different. Then how will you do it
– Abhay Varma
Nov 21 '18 at 9:07
i have used the class name.
– Sooriya Dasanayake
Nov 21 '18 at 9:09
i have used the class name.
– Sooriya Dasanayake
Nov 21 '18 at 9:09
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
Please can you help me the same code in javascript
– Abhay Varma
Nov 21 '18 at 9:14
add a comment |
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>
Please can you help me in javascript
– Abhay Varma
Nov 21 '18 at 9:09
@AbhayVarma Check again
– Carl Binalla
Nov 21 '18 at 9:33
add a comment |
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>
Please can you help me in javascript
– Abhay Varma
Nov 21 '18 at 9:09
@AbhayVarma Check again
– Carl Binalla
Nov 21 '18 at 9:33
add a comment |
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>
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>
edited Nov 21 '18 at 9:32
answered Nov 21 '18 at 8:14
Carl BinallaCarl Binalla
4,16642040
4,16642040
Please can you help me in javascript
– Abhay Varma
Nov 21 '18 at 9:09
@AbhayVarma Check again
– Carl Binalla
Nov 21 '18 at 9:33
add a comment |
Please can you help me in javascript
– Abhay Varma
Nov 21 '18 at 9:09
@AbhayVarma Check again
– Carl Binalla
Nov 21 '18 at 9:33
Please can you help me in javascript
– Abhay Varma
Nov 21 '18 at 9:09
Please can you help me in javascript
– Abhay Varma
Nov 21 '18 at 9:09
@AbhayVarma Check again
– Carl Binalla
Nov 21 '18 at 9:33
@AbhayVarma Check again
– Carl Binalla
Nov 21 '18 at 9:33
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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 '18 at 8:07
Actually Javascript
– Abhay Varma
Nov 21 '18 at 9:09