Enable and disable textbox if checkbox is checked - javascript

I read this article as suggested by an answer for a similar question. I did everything the article said, but the end result wasn't what I wanted.
I want the text box to be disabled by default. When the checkbox is checked, the textbox is enabled.
What happened was that the textbox is enabled by default, and when the checkbox is checked, the textbox is disabled.
Here is my code:
<td class="trow2">
{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" />
<input type="checkbox" class="input_control" value="subject" />
<strong>I believe {$forum['name']} is the best section for this topic.</strong>
</td>
<script type="text/javascript">
$(document).ready(function(){
$('.input_control').attr('checked', true);
$('.input_control').click(function(){
if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false) {
$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
}
else {
$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
}
});
});
</script>

You can simplify your code:
$(document).ready(function () {
$('.input_control').change(function () {
$('input[name=' + this.value + ']')[0].disabled = !this.checked;
}).change();
});
Demo: http://jsfiddle.net/t5qdvy9d/1/

The checkbox and the input elements are siblings so you can use
$(document).ready(function () {
$('.input_control').prop('checked', true);
$('.input_control').change(function () {
$(this).siblings('input').prop('disabled', this.checked)
});
});

If you use jQuery 1.6 or later, you can use this way. Of course, it works with the textarea element also. The demo below includes textarea element too.
edited: add textarea element.
$(document).ready(function(){
$('.input_control').change(function () {
$(".textbox").prop('disabled', this.checked);
$(".textarea").prop('disabled', this.checked);
});
$('.input_control').prop('checked', true);
$('.input_control').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="test subject" tabindex="1" />
<textarea class="textarea"></textarea>
<p></p>
<input type="checkbox" class="input_control" value="subject" />
<strong>I believe forum name is the best section for this topic.</strong>

Related

Changing input text value with jQuery in form

I have 2 checkbox input and 1 input text.
When i click on checkbox #1 i want to disabled checkbox #2 then, add a text (my-text-1) in input text and make it unchangeable
When i click on checkbox #2 i want to disabled checkbox #1 then, add a text (my-text-2) in input text and make it unchangeable
with jQuery 3.4.1
So, it works but ...
When i submit the form, the value of the input text is not recorded in my database. It's like the field is empty.
$(document).ready(function(){
$("#checkbox1").on('click', function(){
if($(this).is(':checked')) {
$("#inputtext").val("my-text-1").prop('disabled', true);
$("#checkbox2").prop('disabled', true);
} else {
$("#inputtext").val("").prop('disabled', false);
$("#checkbox2").prop('disabled', false);
}
});
$("#checkbox2").on('click', function(){
if($(this).is(':checked')) {
$("#inputtext").val("my-text-2").prop('disabled', true);
$("#checkbox1").prop('disabled', true);
} else {
$("#inputtext").val("").prop('disabled', false);
$("#checkbox1").prop('disabled', false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Checkbox #1</label>
<input id="checkbox1" type="checkbox" value="" name="checkbox1"><br/>
<label>Checkbox #2</label><input id="checkbox2" type="checkbox" value="" name="checkbox2"><br/>
<label>Text : </label><input name="inputtext" id="inputtext" type="text" size="50" maxlength="50" value="" />
Instead of using disabled property on the input[text] element use readonly property. Data for disabled elements does not get submitted:
$("#inputtext").val("my-text-1").prop('readonly', true);
Another alternative would be to enable the element prior to submitting the form.
Reference

How display data entered in one text box to another text box on checkbox tick?

I'm trying to reflect data entered in one text box to another text box on checkbox tick. The default state of checkbox is checked. The value should change after it is unchecked and gets checked back again. Even though the code seems to be working, the only output I'm getting is 'on'.
$(".check").click(function() {
if ($(this).is(":checked")) {
$('.add1').val(this.value) === $('.add2').val(this.value);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />
Kindly note that I would like to do this by class.
Here's the fiddle: https://jsfiddle.net/starscream166/n87vLd51/1/
The issue is because this refers to the checkbox. Hence this.value, which you place in the value of the textboxes, it the string 'on'.
To fix this place the val() of .add1 in to .add2, as in the below example. Also note the use of change instead of click when dealing with checkboxes, as it improves accessibility.
$(".check").change(function() {
if (this.checked) {
$('.add2').val($('.add1').val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />
Please check here: https://jsfiddle.net/4kp3msax/1/
OR you can do the following code.
$(".check").click(function() {
if ($(this).is(":checked")) {
var add1 = $('.add1').val();
$('.add2').val(add1);
}
});
Pass $('.add2').val() the result of $('.add1').val()
.val() can be used to retrieve or assign an input's value. It can be called without a parameter, which will return the string value of the input. Or, it can be called with a parameter which will assign the value to the input.
$(".check").click(function() {
if ($(this).is(":checked")) {
$('.add2').val($('.add1').val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />
Works when any of one field data changed
let swt_data = "";
$(".add1").on("change", function() {
swt_data = $(this).val();
})
$(".check").click(function() {
if ($(this).is(":checked")) {
if (swt_data != $('#first').val() != $('#second').val()) {
$('#first').val(swt_data);
$('#second').val(swt_data)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add1" />

display data on selecting a checkbox

I have 3 checkboxes
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
and a div that contains 2 inputs
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
Checkbox Permanent and Contract can be selected normally, but i want that till the time Drive checkbox is not selected, the div should stay disabled, when the user selects Drive, he should be able to select values from div and if he again unchecks the Drive checkbox the div should get disabled again.
I tried to follow this code but it didnt seemed to work for me, can anyone please tell how it can be done
You could disable/enable the time controls like this:
function setDateTimeAvailability() {
var checked = $("#inlineCheckbox2").is(':checked');
$("#datetime input").attr('disabled', !checked);
// Or, if you prefer to hide, do:
// $("#datetime").toggle(checked);
}
$("#inlineCheckbox2").change(setDateTimeAvailability);
// Make sure on page load the datetime availability is set correctly
$(setDateTimeAvailability);
Here is a fiddle.
Try this out:
Required Library: <script
src="//code.jquery.com/jquery-1.11.3.min.js">
$(function() {
HideDiv();
});
$("#inlineCheckbox2").on('change', function() {
HideDiv();
});
function HideDiv() {
if ($("#inlineCheckbox2").is(':checked')) {
$("#datetime").show();
} else {
$("#datetime").hide();
}
}
Try below code :
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
<div id="datetime" style="display:none;">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
<script>
$("#inlineCheckbox2").change(function(){
if($(this).is(':checked')){
$("#datetime").show();
} else{
$("#datetime").hide();
}
});
</script>
</body>
$(document).ready(function() {
$("#inlineCheckbox2").change(function() {
//dissable if check box not selected
var dissable = !$(this).is(':checked');
//set all .form-controls dissabled
$('.form-control').each(function() {
$(this).attr('disabled', dissable);
});
});
//set initail status
$("#inlineCheckbox2").trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name="chk[]" id="inlineCheckbox3" value="Contract">Contract
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee">
</div>
Check this one:
<script type="text/javascript">
$(document).ready(function(){
$(".form-control").prop('disabled', true);
$('#inlineCheckbox2').change(function(){
var checked = $("#inlineCheckbox2").is(':checked');
if (checked == true)
{
$(".form-control").prop('disabled', false);
}
else
{
$(".form-control").prop('disabled', true);
}
});
});
Check Here
The shortest way to do this (in terms of code text) is to give the Drive checkbox a jQuery script to run when its value is changed:
onchange=$('#datetime').children().prop('disabled',
!$(this).prop('checked'))
And let the date and time inputs be disabled when the document loads.

checkbox enable onload to display other elements

Ok, The question here is to allow a form to grab information from a mysql settings, like enabled or disabled. then a checkbox is going to determine if the the 3 following text fields (box123) are going to be enabled or disabled depending on that request.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
<br>
<input type='text' name="details" id="tb1" value='box1'>
<br>
<input type='text' name="details" id="tb2" value='box2'>
<br>
<input type='text' name="details" id="tb3" value='box3'>
<br>
</form>
</body>
</html
>
test.js Jquery code which allows the check to be enabled or disabled depending on the activation varible
toggleInputs($('#checker'));
$('#checker').click(function () {
toggleInputs($(this));
});
function toggleInputs(element) {
if (element.prop('checked')) {
$('#tb1').prop('disabled', false);
$('#tb2').prop('disabled', false);
$('#tb3').prop('disabled', false);
} else {
$('#tb1').prop('disabled', true);
$('#tb2').prop('disabled', true);
$('#tb3').prop('disabled', true);
}
}
While you've already accepted an answer, I feel that answer over-complicated the solution somewhat, and left in unnecessary redundancy. That said, I'd suggest the following approach:
function toggleInputs(element) {
/* using a multiple selector
checking whether the check-box is checked or not using ':is()`,
which returns a Boolean */
$('#tb1, #tb2, #tb3').prop('disabled', element.is(':checked'));
}
$('#checker').change(function(){
// event-handling (reacting to the change event)
toggleInputs($(this));
/* the next change() (without arguments) triggers the change event,
and, therefore, the event-handling */
}).change();
JS Fiddle demo.
Amended the above function (using the ! operator) to have the fields editable while the input is checked, and disabled while the input is unchecked:
function toggleInputs(element) {
$('#tb1, #tb2, #tb3').prop('disabled', !element.is(':checked'));
}
$('#checker').change(function(){
toggleInputs($(this));
}).change();
JS Fiddle demo.
References:
:checked selector.
change().
is().
prop().
Here you go... Actually using jquery as your question asked:
HTML
<form>
<input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
<br>
<input type='text' name="details" id="tb1" value='box1'>
<br>
<input type='text' name="details" id="tb2" value='box2'>
<br>
<input type='text' name="details" id="tb3" value='box3'>
<br>
</form>
JavaScript
$(document).ready(function() {
toggleInputs($('#checker'));
$('#checker').click(function () {
toggleInputs($(this));
});
});
function toggleInputs(element) {
if (element.prop('checked')) {
$('#tb1').prop('disabled', false);
$('#tb2').prop('disabled', false);
$('#tb3').prop('disabled', false);
} else {
$('#tb1').prop('disabled', true);
$('#tb2').prop('disabled', true);
$('#tb3').prop('disabled', true);
}
}
http://jsfiddle.net/Q9Lg4/40/
When the initial call is made the elements in the body are not yet loaded. You can wrap the first call to toggleInputs in a JQuery ready event function or place the script tag that includes test.js after the form.

Enabling inactive fields by clicking on field

Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:
<input type="text" id="gov1" name="gov1">
<input type="text" id="parentb" name="parentb">
<input type="checkbox" name="child" id="child">
All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.
window.onload = function(event)
{
var $input2 = document.getElementById('dec');
var $input1 = document.getElementById('parentb');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
}
I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?
This method you are looking is called 'chained-select' method.
jQuery framework is used for example below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
<label>
<input name="Government" type="checkbox" value="">Government</label>
<br>
<label>
<input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
<br>
<label>Name of Child
<input type="text" name="parent_child" value="" class="parent_child_group"></label>
<br>
<label>Other
<input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
enable_cb();
$("#parent_child_group").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.parent_child_group").removeAttr("disabled");
} else {
$("input.parent_child_group").attr("disabled", true);
}
}
});
</script>
</body>
</html>
Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/

Categories