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.
Related
What I'm trying to achieve is when I tick a checkbox the value should show in a text box. But with the below code I can't show value in more than one checkbox. It overwrites the old one.
$('#multiselect-drop input').change(function() {
if (this.checked) {
$('#results').val(this.value);
} else {
$('#results').val("");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="results">
<div id="multiselect-drop">
<input type="checkbox" value="Testing the textbox">
<input type="checkbox" value="Testing 2 the textbox">
</div>
So what I want is, show all checked values in the text box with comma-separated. Anyone can help?
You need to get all checkboxes rather than just the one that is checked:
var $inputs = $('#multiselect-drop input');
var $results = $('#results');
$inputs.change(function() {
var values = $inputs.filter(':checked').map(function() {
return this.value;
}).get().join(',');
$results.val(values);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="results">
<div id="multiselect-drop">
<input type="checkbox" value="Testing the textbox">
<input type="checkbox" value="Testing 2 the textbox">
</div>
I have this code, when im trying to toggle the checkbox (I can view the changes in inspect), the value of the checkbox doesnt change
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value=""/>
</div>
checkout with value
if ($(this).prop("checked") == true) {
$("h2 span").text(checkBoxval);
}
$(document).ready(function() {
var $checkBox = $("[type='checkbox']");
var checkBoxval = $checkBox.val();
$("h2 span").text(checkBoxval);
$checkBox.on("click", function() {
if ($(this).prop("checked") == true) {
$("h2").show();
$("h2 span").text(checkBoxval);
} else {
$("h2").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="My Checkbox value" checked="true">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value="" />
<h2>Your value is <span></span></h2>
</div>
Well, we can't see you js code but, you SHOULDN'T duplicate an id attribute like you did with NCONF_RSN1
You given the same id to both input element, give two different id. Then it will work
Figured out my problem, added "_" on hidden id
Instead of id="NCONF_RSN1" i used id="NCONF_RSN1_".
i just tried it, i dont know how it worked.
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1_" value=""/>
</div>
I have a dynamically created table that is filled with rows and columns of checkboxes.
Their unique id's are dynamically created as well.
I would like to store the order that the checkboxes are checked by the user in the checkboxs' values.
If a checkbox is unchecked, its value should be reset to "" or to "0".
It doesn't matter how many times a checkbox is checked and unchecked.
I only need the ultimate order, so an incrementing variable should work fine.
For example:
There are checkbox1 - checkbox10 and all their values are initially set to "".
If the user first clicked on checkbox3 its value would be set to "1".
If the user then clicked on checkbox5 its value would be set to "2".
If the user then clicked on checkbox8 its value would be set to "3".
If checkbox3 and checkbox5 were unclicked, their values would be reset to "".
If checkbox3 were checked yet again its value would be set to "4".
It would not matter that there was no checkbox with a value of 1 or 2.
https://jsfiddle.net/a6fm7h9h/
$(document).ready(function() {
var checkboxChecks = 1;
$('input[type=checkbox]').on('change', function() {
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});
input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="" name="cb1" />
<input type="checkbox" value="" name="cb2" />
<input type="checkbox" value="" name="cb3" />
<input type="checkbox" value="" name="cb4" />
<input type="checkbox" value="" name="cb5" />
<input type="checkbox" value="" name="cb6" />
<input type="checkbox" value="" name="cb7" />
<input type="checkbox" value="" name="cb8" />
<input type="checkbox" value="" name="cb9" />
<input type="checkbox" value="" name="cb10" />
You could do this:
If you don't have jQuery on your website, add this code first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
And then, add this (which should do the trick without any modifications):
<script>
var myCount = [];
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
if($(this).is(":checked")) {
myCount.push($(this).attr('id'));
$(this).val(myCount.indexOf($(this).attr('id'))+1);
}else{
delete myCount[myCount.indexOf($(this).attr('id'))];
$(this).val("");
}
});
});
</script>
Hope this works, let me know!
Cheers
Just drawing from what others posted, this seems to work fine.
$(document).ready(function() {
var checkboxChecks = 10001;
$('.myTablesClass').on('change', 'tr td .myInputsClass', function(){
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});`
I have a form here which id like the users to be able to select the radio button to choose a pre-defined amount option, or press the textbox (focus) to select the custom amount. The purpose of the javascript below is to clear the textbox when a predefined amount has been selected. It also allows users to CLICK the textbox (onfocus) to enter a custom amount in the CP_otheramount field (also use the radio button as a fallback).
It all seems to be working except for the onfocus. It works perfectly on load...but try this scenario:
Load the page, click inside the textbox but then decide to change your mind by selecting the value 3 radio button (64)...and then decide to press inside the onfocus textbox amount again... it become disabled and stops you from clicking inside or writing a number in!
Can anyone see the problem here at all? Its strange because it works on Stackoverflow just not on the live site. ANy help would be really appreciated.
Here is what has been created so far:
function activate() {
$('#other').prop('checked', true);
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
The problem with your code is that you are checking every radio button without un-checking them.
function activate() {
// $('#other').prop('checked', true); Remove this line;
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
And also
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
UPDATE:
It was working for me but I don't know why it's not working for you, so I rewrote the functions..See if this works for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
<script>
function activate(){
$('#theamount').attr('disabled',false);
$('#theamount').focus();
$('#other').click();
}
function deactivate(){
$('#theamount').val('');
$('#theamount').attr('disabled',true);
}
$('#toggle').click(function(){
activate();
});
$('input[name="am_payment"]').change(function(){
if($(this).val() != ""){
deactivate();
}else{
activate();
}
});
</script>
I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!
If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/
Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO
There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/