Enable the click event on checkbox in javascript - javascript

When I click on the 1st checkbox, then 2 checkbox is automatically checked and it can not be unchecked if 1st is checked and if 1 is not checked then 2 is checked manually and i am done this code in the javascript
if(firstCheckboxCheckd == true){
secondCheckboxChecked.click = false;
}
else {
secondCheckboxChecked.click = true;
}

I am not sure if I got your question right, but here is my take.
Requirement: -
When user check checkbox 1, it should automatically check checkbox 2
Issue : -
When checking checkbox 1 and automatically checking checkbox 2, checkbox 2 doesnt response anymore
solution below
$(document).ready(function() {
$('#Checkbox1').click(function(){
let firstCheckbox = $('#Checkbox1');
let secondCheckbox = $('#Checkbox2');
if(firstCheckbox.is(":checked"))
{
console.log('firstCheckbox is checked');
secondCheckbox.prop('checked', true);
secondCheckbox.prop('disabled', true);
}
else
{
console.log('secondCheckbox is checked');
secondCheckbox.prop('disabled', false);
}
})
});

Related

Get the certain radio button

have 5 radio button(yes or no) and I want to do is whenever I select 'Yes' either those buttons my textarea will color red, and I've already done that. but the problem is whenever I've select only one 'Yes' and change it to No the color of the textarea still remains on red
$('.com_lease_checkbox').on("change", function() {
console.log($(this).val());
$(".com_lease_checkbox:checked").each(function(){
// Check if the value is Yes
if ($(this).is(':checked') && $(this).val() == 'Yes') {
// Set the color of text-area
$('.com_lease_desc_a').css("border-color","red");
}
});
});
Simple way to do this is to Count How many selected 'No's .. if it's Zero it's OK else Red
$('.com_lease_checkbox').on("change", function() {
//var selectedYesCheckBoxesCount = $(".com_lease_checkbox[value='Yes']:selected").length;
var selectedNoCheckBoxesCount = $(".com_lease_checkbox[value='No']:selected").length;
if(selectedNoCheckBoxesCount > 0) {
$('.com_lease_desc_a').css("border-color","red");
}
else {
$('.com_lease_desc_a').css("border-color","green");
}
});

Checkbox to trigger input, and vice versa

I am currently working on a form, and am required to do the following:
If the checkbox next to the input field (in this case, a qty field) is checked, then set the input to "1". If the qty field is greater than one, then the checkbox remains checked.
If the checkbox is unchecked, then the qty field is reset to 0. Alternatively, if the user inputs 0 into the qty field, then the checkbox is also unchecked
Problems
The increase button currently requires two clicks to increment the qty
When the qty field has a number > 0, and is then decreased to 0, the increase button no longer works.
Can anyone spot the error in my ways?
jQuery('.exhibitorBooking--table .desc input[type="checkbox"]').on('change', function(){
if(this.checked){
jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('1');
} else {
jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('0');
}
});
jQuery('.exhibitorBooking--table .qty-field input[type="text"]').on('change', function(){
if(jQuery(this).val() == 0){
jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', false);
} else if(jQuery(this).val() == 1) {
jQuery(this).parents('tr').find('input[type="checkbox"]').trigger('change').attr('checked', true);
} else {
jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', true);
}
});
JSFiddle
jQuery(document).ready(function() {
$('#chkStand-1-1').on('change', function() {
var value = $(this).is(':checked') ? 1 : 0;
$('.input-text').val(value);
});
$('.input-text').on('keyup', function() {
$('#chkStand-1-1').prop('checked', (parseInt($(this).val(), 10) > 0));
});
});
Demo: https://jsfiddle.net/tusharj/01s04dw4/1/

jQuery working with dropdown but not radio button

I need to rewrite this section of a jQuery script so that it is triggered by selection of a radio button and not a dropdown.
var check_engraving = $('#attrib-2');
if (check_engraving.val() == 4) {
enable_engraving = true;
$('#individual_engraving_wrapper').show();
The new radio button that needs to trigger it is:
<span class="EngraveAttribute4"><input type="radio" name="id[2]" value="540" id="attrib-2-540" /><label class="attribsRadioButton zero" for="attrib-2-540">I would like different engraving on each of these items</label><br /></span>
It's obviously no good changing it to
var check_engraving = $('#attrib-2-540');
if (check_engraving.val() == 540) {
as the value is always 540 regardless of whether or not it is selected.
I tried to use
$('input:radio[name="id[2]"]').change(function () {
if ($(this).val() == '540') {
enable_engraving = true;
$('#individual_engraving_wrapper').show();
}
});
which I thought was working ok, but if I update the quantity I have to deselect then reselect the radio button for engraving to be true. The old dropdown system stayed as true when the quantity was updated.
I'm sure this can be done, but I'm stumped on it. Any suggestions appreciated.
try this
$('input[type=radio][name="id[2]"]').change(function () {
if ($(this).val() == '540') {
enable_engraving = true;
$('#individual_engraving_wrapper').show();
}
});

check if 1 of 2 check boxes per group is checked on form submit?

I have 8 check boxes, split into groups of 2. in the first group, I have one checkbox labeled checkbox1 and one labeled checkbox2. I want a JavaScript code that will allow me to be able to check on the form submit whether at least one of 2 of these checkboxes has been checked for each group.
I do not want a script that simply checks to see if you have checked only one checkbox as this will mean the user would not have to check at least one of the other checkboxes in the other group of checkboxes.
Does anyone know of a way of how I can do this please and am I going along the right lines?
$('#form_check').on('submit', function (e) {
if ($("input[id=box1]:checked").length === 0) {
if ($("input[id=box2]:checked").length === 1) {
} else {
if ($("input[id=box2]:checked").length === 0) {
if ($("input[id=box1]:checked").length === 1) {
e.preventDefault();
alert('no way you submit it without checking a box');
return false;
}
}
}
}
});
Do it like this:
$("button").click(function(){
var length = 0; // initial length
$(".group").each(function(){
// if box is checked, add 1, else 0
length += ($(this).find("input:checked").length === 1);
});
// if there are as many box's checked as many groups, i.e. one checked box per group
if(length === $(".group").length){
alert("y");
}else{
alert("no");
}
});
DEMO

How to enable submit button if at least two checkboxes are checked?

With the help of answers I found here, I try to disable submit button and send an alert message when clicked on it until there's not at least 2 checkboxes checked.
What I am doing wrong ?
var selected = $('#frmCompare :checkbox:checked').length;
function verifCompare() {
if (selected >= 2) {
//good
$('#frmCompare').submit();
} else {
//bad
alert('Veuillez selectionner au moins 2 produits à comparer...');
return false
}
}
$(document).ready(function () {
$('#btnCompare').attr('disabled', 'disabled');
$('#frmCompare :checkbox').change(function () {
//alert(selected);
if (selected >= 2) {
$('#btnCompare').attr('enabled');
}
});
});
At this point, only alert message works.
Fiddle
EDIT : added fiddle
There is no enabled attribute in HTML.
$('#btnCompare').prop('disabled', selected < 2);
You also need to recalculate the value of selected at every change, you can't just go with what it was set to at page load.
You initialize the count of checked checkboxes just once, when your script is first parsed. The count will not be recomputed later. This line:
var selected = $('#frmCompare :checkbox:checked').length;
should be inside the verification function, not outside.
You should change your code as
$('#frmCompare :checkbox').change(function(){
//update selected variable
selected = $('#frmCompare :checkbox:checked').length
if (selected >= 2) {
$('#btnCompare').attr('enabled');
}
});

Categories

Resources