I need to show a series of <div> elements one at a time when the user clicks a button. They start out hidden using <div style="display:none">. There are a total of 11 <div> tags each with different "id" from id="dt-1" to id="dt-11"
Here's the code I have now:
function adddt() {
var count;
for(count=1;count<6;count++)
{
document.getElementById('dt-'+count+'').style.display = 'block';
}
};
<div id='dt-1'>
<label>Destination 1</label>
<input type="text">
<input type="number">
</div>
<div id='dt-2' style="display:none;">
<label>Destination 2</label>
<input type="text">
<input type="number">
</div>
<div id='dt-3' style="display:none;">
<label>Destination 3</label>
<input type="text">
<input type="number">
</div>
<div id='dt-4' style="display:none;">
<label>Destination 4</label>
<input type="text">
<input type="number">
</div>
<div id='dt-5' style="display:none;">
<label>Destination 5</label>
<input type="text">
<input type="number">
</div>
<input type="button" onclick="adddt()" value="add more destinations">
As you can see, when you click the button it shows all of the <div>s,
not one at a time. Each click should only add a single <div>, not all of them.
First click - show <div id='dt-2'>
Second click - show <div id='dt-3'>
... and so on.
you can try this, use a variable where you store the current id and each time you increment it by 1 :
var count = 2;
var countMax = 5;
function adddt() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
<div id='dt-1'>
<label>Destination 1</label>
<input type="text">
<input type="number">
</div>
<div id='dt-2' style="display:none;">
<label>Destination 2</label>
<input type="text">
<input type="number">
</div>
<div id='dt-3' style="display:none;">
<label>Destination 3</label>
<input type="text">
<input type="number">
</div>
<div id='dt-4' style="display:none;">
<label>Destination 4</label>
<input type="text">
<input type="number">
</div>
<div id='dt-5' style="display:none;">
<label>Destination 5</label>
<input type="text">
<input type="number">
</div>
<input type="button" onclick="adddt()" value="add more destinations">
Related
I am trying to enable disable very next input field with check uncheck of a closest checkbox.
I tried the following script.
$(document).on('change', '.check:checkbox', function(){
if (this.checked) {
$(this).next().prop('disabled', false);
}else{
$(this).next(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
As your HTML stands, .next() points to the label element.
You should first target the closest div then find the respective element from that div element:
$(this).closest('div').find('.inputs')
$(document).on('change', '.check:checkbox', function(){
var currentEl = $(this).closest('div').find('.inputs');
if (this.checked) {
currentEl.prop('disabled', false);
}else{
currentEl.prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
$(this).next() is the <label>, and next after that is <br>.
Use .nextAll() to get all the following siblings that match a selector, and .first() to get the first one of these.
$(document).on('change', '.check:checkbox', function() {
let nextinput = $(this).nextAll(".inputs").first();
nextinput.prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
You should change the <label>, wrapping the checkbox. This will improve the user experience. Then change the jQuery selector to $(this).closest("div").find(".inputs") in order to address the right input element.
$(document).on('change', '.check:checkbox', function(){
$(this).closest("div").find(".inputs").prop('disabled',!this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="a">
</div>
<div class"two">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="b">
</div>
<div class"three">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="c">
</div>
You are almost there. next() element is not input, it's label so why your code is fail. You can increase the next()(next().next()...) until you find proper element.
There are several way to find desire input to enable/disable. If your DOM is not changeable and there are only 1 sibling input use siblings('input').
Example:
$(document).on('change', '.check:checkbox', function() {
if (this.checked) {
$(this).siblings('input').prop('disabled', false);
} else {
$(this).siblings(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
I have a problem. I want to display different types of forms such as the form for adding, the form for modifying, and the form for deleting based on the user input by using a JavaScript switch statement. So if the user input "A", the add form will show up, when the user input "B" then the modify form will show up, etc. The problem here is it doesn't matter what I typed in nothing shows up. Can someone explain it to me? Thank you.
Note: The CSS for the forms display: none; because I don't want the forms to show up when the page load. I just want base on the user input, then the specific form will show. I want to make the dropdown list instead of typing in the box, but it is not easy to do it.
var val=document.getElementById("user").value;
var check=document.getElementById("enter");
function change(){
switch(val){
case 'A': {
document.getElementById("add").style.display="block";
break;
}
case 'B': {
document.getElementById("modify").style.display="block";
break;
}
case 'C': {
document.getElementById("delete").style.display="block";
break;
}
}
}
check.addEventListener("click", change);
div#add, div#modify, div#delete{
display: none;
}
<div id="add">
<div id="add_task_form">
<button id="add_task">Add New Task</button>
<form id="add_form" name="task_form" method="post">
<div id="title_form">
<label for="title">Title</label>
<input type="text" name="title" id="title"><br>
</div>
<div id="description_form">
<label for="description">Description</label>
<input type="text" name="description" id="description"><br>
</div>
<div id="due_date_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_form">
<label for="time">Time</label>
<input type="text" name="time" id="time" placeholder="hh:mi"><br>
</div>
<input id="submit_add_form" type="submit" name="submit" value="Save">
</form>
<br>
</div>
</div>
<div id="modify">
<div id="modify_task_form">
<button id="modify_task">Modify Task</button>
<form id="modify_form" name="modify_form" method="post">
<div id="modify_section">
<label for="modify_com_in">What section?</label>
<input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="modify_section_id">
<label for="modify_com_in_id">What ID?</label>
<input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>
</div>
<div id="title_modify_form">
<label for="modify_title">Title</label>
<input type="text" name="title" id="modify_title"><br>
</div>
<div id="description_modify_form">
<label for="modify_description">Description</label>
<input type="text" name="description" id="modify_description"><br>
</div>
<div id="due_date_modify_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_modify_form">
<label for="modify_time">Time</label>
<input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>
</div>
<input id="submit_modify_form" type="submit" name="modify" value="Modify">
</form>
<br>
</div>
</div>
<div id="delete">
<div id="delete_task_form">
<button id="delete_task">Delete Task</button>
<form id="delete_form" name="delete_form" method="post">
<div id="delete_section">
<label for="delete_com_in">What section?</label>
<input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="delete_section_id">
<label for="delete_com_in_id">What ID?</label>
<input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>
</div>
<input id="submit_delete_form" type="submit" name="delete" value="Delete">
</form>
<br>
</div>
</div>
<label for="user">User</label>
<input id="user" type="text" name="user">
<input type="button" value="Enter" id="enter">
Try this to use a dropdown menu instead:
<label for="action">Choose an action:</label>
<select id="action" name="action" onchange='onSelectChangeHandler()'>
<option value="add">Add</option>
<option value="modify">Edit</option>
<option value="delete">Delete</option>
</select>
and the Javascript code:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
switch (val) {
case "add":
// document.getElementById("add").style.display="block";
console.log("Show form Add");
break;
case "modify":
// document.getElementById("modify").style.display = "block";
console.log("Show form Modify");
break;
case "delete":
// document.getElementById("delete").style.display = "block";
console.log("Show form Delete");
break;
}
}
Just remove the comments if it works.
But you could also remove the switch statement by simply doing:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
document.getElementById(val).style.display="block";
console.log("Show form ", val);
}
That is if the option value(s) are the exact same as their id tags counterparts
You need to get the value of user input inside change function.
var check=document.getElementById("enter");
function change(){
var val=document.getElementById("user").value;
switch(val){
case 'A': {
document.getElementById("add").style.display="block";
break;
}
case 'B': {
document.getElementById("modify").style.display="block";
break;
}
case 'C': {
document.getElementById("delete").style.display="block";
break;
}
}
}
check.addEventListener("click", change);
div#add, div#modify, div#delete{
display: none;
}
<div id="add">
<div id="add_task_form">
<button id="add_task">Add New Task</button>
<form id="add_form" name="task_form" method="post">
<div id="title_form">
<label for="title">Title</label>
<input type="text" name="title" id="title"><br>
</div>
<div id="description_form">
<label for="description">Description</label>
<input type="text" name="description" id="description"><br>
</div>
<div id="due_date_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_form">
<label for="time">Time</label>
<input type="text" name="time" id="time" placeholder="hh:mi"><br>
</div>
<input id="submit_add_form" type="submit" name="submit" value="Save">
</form>
<br>
</div>
</div>
<div id="modify">
<div id="modify_task_form">
<button id="modify_task">Modify Task</button>
<form id="modify_form" name="modify_form" method="post">
<div id="modify_section">
<label for="modify_com_in">What section?</label>
<input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="modify_section_id">
<label for="modify_com_in_id">What ID?</label>
<input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>
</div>
<div id="title_modify_form">
<label for="modify_title">Title</label>
<input type="text" name="title" id="modify_title"><br>
</div>
<div id="description_modify_form">
<label for="modify_description">Description</label>
<input type="text" name="description" id="modify_description"><br>
</div>
<div id="due_date_modify_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_modify_form">
<label for="modify_time">Time</label>
<input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>
</div>
<input id="submit_modify_form" type="submit" name="modify" value="Modify">
</form>
<br>
</div>
</div>
<div id="delete">
<div id="delete_task_form">
<button id="delete_task">Delete Task</button>
<form id="delete_form" name="delete_form" method="post">
<div id="delete_section">
<label for="delete_com_in">What section?</label>
<input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="delete_section_id">
<label for="delete_com_in_id">What ID?</label>
<input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>
</div>
<input id="submit_delete_form" type="submit" name="delete" value="Delete">
</form>
<br>
</div>
</div>
<label for="user">User</label>
<input id="user" type="text" name="user">
<input type="button" value="Enter" id="enter">
I have a set of checkboxes for some fruits and vegetables. And I need to write such a function that when at least one of the fruits is selected, the fruit input field appears and does not disappear as long as at least one fruit is selected. When all checkboxes from the fruit are unchecked, the input field should disappear. And the same thing with vegetables.
But I'm confused and can't figure out how to do it better. I would be grateful for your help.
<div>
<input type="checkbox" id="apple" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" id="banana" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="banana">banana</label>
</div>
<div>
<input type="checkbox" id="mangoe" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="mangoe">mangoe</label>
</div>
<div>
<input type="checkbox" id="potato" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="potato">potato</label>
</div>
<div>
<input type="checkbox" id="celery" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="celery">celery</label>
</div>
<input type="text" id="fruits" name="fruits">
<input type="text" id="vegetables" name="vegetables">
function showInput() {}
Check out this code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<input type="checkbox" id="apple" class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" id="banana" class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
<label for="banana">banana</label>
</div>
<div>
<input type="checkbox" id="mangoe" class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
<label for="mangoe">mangoe</label>
</div>
<div>
<input type="checkbox" id="potato" class="vegetables custom-checkbox" autocomplete="off" onchange="showVeggies()">
<label for="potato">potato</label>
</div>
<div>
<input type="checkbox" id="celery" class="vegetables custom-checkbox" autocomplete="off" onchange="showVeggies()">
<label for="celery">celery</label>
</div>
<input type="text" id="text_fruits" name="fruits" disabled>
<input type="text" id="text_vegetables" name="vegetables" disabled>
<button onclick="myFunction()">Click me</button>
<script>
function showFruits() {
var fruits_checklist = document.getElementsByClassName("fruits");
var result = false;
for (var i = 0; i < fruits_checklist.length; i++)
result = result || fruits_checklist[i].checked;
document.getElementById("text_fruits").disabled = !result;
}
function showVeggies() {
var fruits_checklist = document.getElementsByClassName("vegetables");
var result = false;
for (var i = 0; i < fruits_checklist.length; i++)
result = result || fruits_checklist[i].checked;
document.getElementById("text_vegetables").disabled = !result;
}
</script>
</body>
</html>
I added class fruits to all fruits and class vegetables to all vegetables for groupings. Renamed text-feilds to avoid duplicacy. I created separate functions for showing/hiding fruits and vegetables.
I have three fields that will be filled by the user.
one for the question, and the two others for the proposed answers. I want to give the user the possibility to add the third or as much as he wants propositions whenever he clicks at add proposition. I started coding the function but it's still missed
<head>
<script>
function myFunction(){
var x = document.createElement("LABEL");
var t = document.createTextNode("Titre");
x.appendChild(t);
}
</script>
</head>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button onclick="myFunction()">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
If I'm getting your question right, you need to add inputs to get more answers from user as he wants. If so, see the following -
var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e) {
e.preventDefault();
var lastID = $("#myForm input[type=text]:last").attr("id");
var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
$(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" /> <input type="text" name="ans${nextId}" id="ans${nextId}" value=""/>Delete<div>`);
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<div id="more_answers"></div>
<br>
<button id="add_button">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
In your function, you have to append your label as well in its parent. Like below -
function myFunction() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
form.appendChild(input)
}
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button type="button" onclick="myFunction()">Add proposition</button> <br><br>
<input type="submit" value="submit">
</form>
If you want to put your elements at any specific place, you should create a wrapper in your form element just like below -
function myFunction() {
let wrapper = document.getElementById("dynamic-fields");
var input = document.createElement("input");
wrapper.appendChild(input)
}
<form>
<!-- ...input fields... -->
<div id="dynamic-fields"></div> <br>
<!-- ...buttons.... -->
<button type="button" onclick="myFunction()">Add proposition</button>
</form>
This way it will put those dynamically generated elements on specific place in your form page.
Try this - https://jsitor.com/IO08f-WBx
Having several rows, where each row has a checkbox, a label, and an input text
How can I enable/disable the checkbox's neighbour input text when the check box is selected, using jquery. By this I mean to just enable/disable the input that is on same row with checkbox
I have:
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
and do not know how to do this
$(':checkbox').change(function(){
$('input:text').?find?.prop("disabled", !$(this).is(':checked'));
});
here is fiddle
maybe like this:
$(':checkbox').change(function(){
var this_nr=$(this).attr('id').substr(-1);
$('#input'+this_nr).prop('disabled', !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
or like this:
$(':checkbox').change(function(){
$('input:text').eq($(':checkbox').index(this)).prop("disabled", !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
I would use event delegation on the form, in the handler using nextAll to find the next text box.
// disable all the text fields
$('#myform :text').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox', function (evt) {
let textbox = $(this).nextAll(':text');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This will toggle when you check the TOS">
</p>
</form>
This works if your entire form is in this checkbox followed by textbox form; it will break if you have any other checkboxes that don't control a textbox or textboxes that shouldn't be disabled. To be more flexible, I would add a class to the items I wanted to have this behavior:
// disable all the text fields
$('#myform :text.toggle-input').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox.toggle-input', function (evt) {
let textbox = $(this).nextAll(':text.toggle-input');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" class="toggle-input" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" class="toggle-input" type="text">
</p>
<p>
<input id="chk2" class="toggle-input" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" class="toggle-input" type="text">
</p>
<p>
<input id="chk3" class="toggle-input" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" class="toggle-input" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This won't toggle when you check the TOS">
</p>
</form>
You could use the jQuery siblings function to retrieve the neighboring textbox and enable/disable it based on the .checked property. I've called .change() at the end to set the initial state of the textboxes.
$(":checkbox")
.change(function() {
$(this)
.siblings("input[type='text']")
.prop("disabled", !this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label>text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label>text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label>text 3 </label>
<input id="input3" type="text">
</p>
</form>