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>
Related
I have here multiple checkboxes which data is from the database. I want that the textbox will be remained disable until I checked or clicked the checkbox. lets just say this is the data that came from the database for example.
$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$('.checks').removeAttr('disabled');
$('.checks').focus();
} else {
$('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
Sure, you can reduce what you have to just the following, using $(this) to refer to the specific checkbox you're checking/unchecking:
$(function() {
$('.check').click(function() {
$(this).next().prop('disabled', !$(this).is(':checked'))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$(this).next('.checks').removeAttr('disabled');
$(this).next('.checks').focus();
} else {
$(this).next('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
I have 3 inputs:
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
I would like that when you click in the text3, it erases the text1.
I did a function but it does not work:
<script>
function myFunction(text3) {
document.text1.value = "";
}
</script>
The correct way of doing this is to assign an event listener to the element, within that you can call your function
function myFunction() {
document.querySelector('input.text1').value = "";
}
document.querySelector('input.text3').addEventListener('focus', myFunction);
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
Make sure to select your elements with DOM methods like querySelector, getElement(s)By... and so on. Never rely on accessing an element by it's global id as this may break depending on used browser. (Though document.text1.value = ""; will never work..)
var text1 = document.querySelector('.text1');
var text3 = document.querySelector('.text3');
text3.addEventListener('focus', myFunction);
function myFunction() {
text1.value = '';
}
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
You can do it very easily using JQuery .
$('.text3').on('focus', function() {
$('.text1').val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
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>
I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.
var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})
Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
I want to get a text box to appear when a radio button is selected yes . This is what my code looks like;
Care of Address? <br>
Yes<input type="radio" name="radio1" value="Yes" onClick="getResults(this)">
No<input type="radio" name="radio1" value="No" onclick="getResults(this)">
<div class="text"><p>Address Line 1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3 <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode <input type="text" name="text5" id="text5" maxlength="30"></p></div>
<script>
(document).ready(function() {
(".text").hide()
});
function getResults(elem) {
elem.checked && elem.value == "Yes" ? (".text").show() : (".text").hide();
};
</script>
Can anyone help me
Abi
Try this:
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = chkYes.checked ? "block" : "none";
}
<label for="chkYes">
<input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />
No
</label>
<div id="dvtext" style="display: none">
Text Box:
<input type="text" id="txtBox" />
</div>
You don't even need JavaScript for this, let alone JQuery or Vue
#dvtext {
display: none;
}
#chkYes:checked ~ #dvtext {
display: block;
}
<input type="radio" id="chkYes" name="chk" />
<label for="chkYes">Yes</label>
<input type="radio" id="chkNo" name="chk" />
<label for="chkNo">No</label>
<div id="dvtext">
Text Box:
<input type="text" id="txtBox" />
</div>
The jquery
$('.no, .yes').click(function() {
if($('.no').is(':checked')) {
$('.adrs').hide();
}
if ($('.yes').is(':checked')){
$('.adrs').show();
}
});
I added the class yes to the yes radio button and no to the no radio button. Alos i added the class adrs to the text fields that are adresses. Then based on the classes im hiding the adresses or showing it
Codepen
It seems that you missed to add $ before (document) as well as before (.text).
Please add $ and see if it works or not.
So your script would become like
<script>
$(document).ready(function() {
$(".text").hide();
});
function getResults(elem) {
elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>
Hope this helps.
that's what you should do
div.text{display:none}
Care of Address?
Yes
No
<div class="text"><p>Address Line 1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3 <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode <input type="text" name="text5" id="text5" maxlength="30"></p></div>
<script>
function getResults(elem) {
elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>
https://jsfiddle.net/2w0zf887/
Here is fiddle for you https://jsfiddle.net/Simplybj/mjLwusut/4/
You can achieve this by binding your radio buttons with click event like this
$('#rdYes').on('click', function() {
$(".text").show();
});
$('#rdNo').on('click', function() {
$(".text").hide();
});
and here is your HTML for that. Its better to wrap input types with label tag. And also if you are going to hide element first then try hide on DOM rendering rather than after DOM is ready to prevent from flickering
Care of Address?
<br>
<label for="rdYes">Yes</label>
<input id="rdYes" type="radio" name="radio1" value="Yes" onClick="getResults(this)">
<label for="rdNo">No</label>
<input id="rdNo" type="radio" name="radio1" value="No" onclick="getResults(this)" checked="checked">
<div class="text" style="display:none;">
<p>Address Line 1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>