We Keep Coding

How can i add a max to a checkbox form with bootstrap 4 button-groups

I have this form with questions that uses checkboxes and radiobuttons, the checkbox questions can have a max amount of checked needed to go to the next question. For the checkboxes and radio buttons i am using the bootstrap buttons.
https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons
I use jquery change function to see when something happens to the checkbox, when something changes i check how many are checked and compare it with the max amount. If the amount of checked is higher than the max then i uncheck the checkbox that was just checked. Problem with this is that when a checkbox unchecks it changes the checkbox and I get an infinite loop and end up getting the error "too much recursion".
Any clue on how I can make this work? I've tried .click instead of .change but then when I get the amount of checked it gives me the wrong number.
Script:
function checkboxHandler(aThis){
if($('.pro-block.pb-active').find('.proanalysecheck:checked').length > $(aThis).data('max')) {
if($(aThis).prop('checked') == true){
$(aThis).parent('label').button('toggle');
}
}
}
$('#frmProinvite .proanalysecheck').change( function(e) {
checkboxHandler(this);
});
.pb-block.pb-active is the current question div and .proanalysecheck is the input class.

What about using a flag which indicates that a change is caused by reaching the max selections? This should do the job.
var changeByMaxReached = false;
function checkboxHandler(aThis){
if(!changeByMaxReached && $('.pro-block.pb-active').find('.proanalysecheck:checked').length > $(aThis).data('max')) {
if($(aThis).prop('checked') == true){
changeByMaxReached = true;
$(aThis).parent('label').button('toggle');
}
}
}
$('#frmProinvite .proanalysecheck').change( function(e) {
if (!changeByMaxReached) {
checkboxHandler(this);
}
changeByMaxReached = false;
});

Key press dont work on dynamicly created element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
i am trying to add a new span of tag inside tags div.
my problem is that the code under span[id="newtag"] doesnt
work. how can i make this code work?
$(document).ready(function () {
$('#tags').on("click", function () {
$(this).append('<span id="newtag" contenteditable="true"></span>');
$(this).children(":last").focus();
});
$('span[id="newtag"]').keypress(function (k) {
if (k.which == 13 || k.which == 32) {
$(this).append('gfskjsokdfla');
}
});
});

Use event delegation for created dymanically dom elements.
$('#tags').on('keypress', 'span[id="newtag"]', function(k){
if (k.which == 13 || k.which == 32) {
$(this).append('gfskjsokdfla');
}
});

Javascript - Checkbox checked condition [duplicate]

This question already has answers here:
How do I determine if a checkbox is checked?
(8 answers)
Closed 8 years ago.
I have a input checkbox, i want to run different block of code, when checkbox is ticked & vice versa.
function checkboxEvent(){
if checked{ ....Run this block }
else { ....Run this block }
}
How to identify in function whether checkbox is checked or not?

Like this:
if(document.getElementById('id of the check box here').checked){
// it is checked. Do something
}
else{
// it isn't checked. Do something else
}
.checked property returns a boolean indicating whether the element is checked or not.

you can check check box value as follows
document.getElementById("myCheck").checked
So your function would be something like ..
function checkboxEvent(){
if (document.getElementById("myCheck").checked){ ....Run this block }
else { ....Run this block }
}

its very easy to find checked property, just use below code
if( $('input[name="transport"]').is(':checked') ) {
alert('checked');
alert($(this).attr('id'));//To get ID of checkBox
}

You might want to check the checked property when the check box is clicked, do:
// onchange event listens when the checkbox's state is changed
document.getElementById('box').onchange = function(){
if(this.checked) alert("y");
else alert("no");
};
DEMO
.checked is a boolean indicating state of checkbox.

< input type="checkbox id="remember" >
<script>
var remember = document.getElementById('remember');
if (remember != null && remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
</script>

Try this :
function checkboxEvent() {
var boxes = document.getElementsByName("chkbox");
for (i = 0; i < boxes.length; i++) {
if (boxes[i].checked) {
console.log(" Checked!");
} else {
console.log("not checked");
}
}
}
The for loop will look up through all of your checkboxes and see if they are checked.
Alternatively, you can use .hasAtrribute .You can find more info about .hasAttribute here

How to get option value on change AND on page load? [duplicate]

This question already has answers here:
How to trigger jQuery change event in code
(5 answers)
Closed 8 years ago.
I know that it is possible to do in two functions, but I am not sure how to make it in one.
$("#purchase_sub_type").change(function() {
if($(this).val() == 15) {
console.log('is 15');
}
else {
console.log('not 15');
}
});
This is example code. Problem is that this code works only on change, not when value is loaded form DB on page reload. Is there simple way to add current val to this function? I know that it is possible adding another function, but in that way code gets ugly and repeats.

Trigger the change event so the code fires
$("#purchase_sub_type").change(function() {
if($(this).val() == 15) {
console.log('is 15');
}
else {
console.log('not 15');
}
}).change(); //or .trigger("change");

Generally it is good idea to give function a name.
var field = $("#purchase_sub_type");
function log () {
if(field.val() == 15) {
console.log('is 15');
}
else {
console.log('not 15');
}
};
field.change(log);
log();

How to distinguish program click from physic [duplicate]

This question already has answers here:
Click source in JavaScript and jQuery, human or automated?
(4 answers)
Closed 8 years ago.
I have an image and code
$(thisSrc).click();
How I can to distinguish physic mouse click by user
$(thisSrc).on("click", function () {
});
from program by javascript?
$(thisSrc).click();

There is isTrigger key in event when it's triggered.
$(el).click(function(e) {
if (e.isTrigger) {
// triggered
} else {
// clicked by hand
};
});

One way would be like this:
var realClick = true;
realClick=false;$(thisSrc).click();
$(thisSrc).on("click", function () {
// stuff
realClick=true;
});