how to disable and enable textbox when a checkbox is checked - javascript

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>

Related

How to enable/disable next input field

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 want to checked my all checkbox from one checkbox

function chk() {
var a = $('#chkAll').prop('checked');
if (a == true)
$('.hobbie').attr('checked', 'checked');
else
$('.hobbie').removeAttr('checked');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk()" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
If I clicked on select all checkbox its selecting all checkbox and if I click again it unchecked all checkbox but after that its not working till I refresh the page.
Use this code:
function chk(obj) {
$('.hobbie').prop('checked', $(obj).prop('checked'));
}
demo
function chk(obj) {
$('.hobbie').prop('checked', $(obj).prop('checked'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk(this)" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
No need to check if condition. Shortest way to do this.
function chk() {
$('#chkAll').on('change', function() {
$('.hobbie:checkbox').prop('checked', $(this).is(":checked"));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input onclick="chk()" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
try simple code:
$("#chkAll").click(function () {
$(".hobbie").attr('checked', this.checked);
//or
$(".hobbie").prop('checked', true);
});
One liner function
function chk(isChecked) {
$('.hobbie').prop('checked', isChecked);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk(this.checked)" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">

Radio buttons in the form, if one checked then unchecked the others?

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>

jQuery find input where radio is checked

$().ready(function () {
$(".div").find("input").each(function (index) {
if($(this).attr("checked")==true){
console.log("You have checked the"+index);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio" >
<input name="1" type="radio" checked="checked" >
<input name="1" type="radio" >
<input name="1" type="radio" >
</div>
Why I cannot use "find" and "each" function to justify which the radio is checked?
The attribute value is 'checked', not true:
if ($(this).attr("checked") == 'checked') {
console.log("You have checked the " + index);
}
Also note that you can make the index retrieval a one-liner using the :checked selector:
$(document).ready(function() {
var index = $(".div").find("input:checked").index();
console.log("You have checked the " + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio">
<input name="1" type="radio" checked="checked">
<input name="1" type="radio">
<input name="1" type="radio">
</div>
console.log("You have checked the " + $("input[name=1]:checked").index());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio">
<input name="1" type="radio" checked="checked">
<input name="1" type="radio">
<input name="1" type="radio">
</div>
No need to use .each() use selector :checked
Description: Matches all elements that are checked or selected.
The problem is whenever you perform $(this).attr("checked") it does NOT returns true, instead, it returns checked for the radio's that are checked and undefined for those which aren't checked.
$().ready(function () {
$("div").find("input").each(function (index) {
if($(this).attr("checked")=="checked"){
console.log("You have checked the "+index);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio" >
<input name="1" type="radio" checked="checked" >
<input name="1" type="radio" >
<input name="1" type="radio" >
</div>
You can find below fiddle.
$('#myForm input').on('change', function() {
alert($('input[name=radioName]:checked', '#myForm').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
You may use the following code to find the value of the selected radio button:
HTML
<table>
<tr>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
JQUERY
$(function(){
$("input[type=radio]").click(function(){
alert($('input[name=q12_3]:checked').val());
});
});
FIDDLE

Mutiple checkboxes to update text field

I have a form that if have checked TransientDevice, ControllingFrequency, and InterEntity then put Yes in the result input. How do I use multiple checkboxes to accomplish this? It works with one checkbox now, the "test" checkbox. I am not sure how to check for more than one checkbox.
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
<script type="text/javascript">
$(function(){
$('#test').change(function() {
$("#result").val(($(this).is(':checked')) ? "yes" : "");
});
});
</script>
</form>
I believe this is what you're asking for:
$('#TransientDevice, #ControllingFrequency, #InterEntity').change(function() {
$("#result").val(($('#TransientDevice').is(':checked') && $('#ControllingFrequency').is(':checked') && $('#InterEntity').is(':checked')) ? "yes" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
</form>

Categories

Resources