I have a table that is dynamically created based on a number that is selected by a user from a dropdown. The table consists of 3 checkboxes. The maximum number of checkboxes that can be checked per row is 2.
Checkbox 2 and 3 behave like radio buttons (I know it would make my life easier to use just radio buttons but then the table doesn't look right as there is one checkbox and 2 radio buttons). If 2 is selected and then the user clicks on 3, then 2 would become unchecked.
I found this script here: http://jsfiddle.net/44Zfv/724/ which works perfectly but when I try to integrate it into my project it doesn't work.
I have created a fiddle here: https://jsfiddle.net/pcqravwj/1/ This demonstates the scenario. As you will see the checkboxes on row 0 are not dynamically created and both checkboxes cannot be checked. I have added the class .cbh to my dynamically created checkboxes on row 1. However, all 3 checkboxes can be checked but I do notice that if a checkbox in row 0 is checked it clears the checkboxes which have the same class in row 1.
This is the piece of code I am using to try and control the checkbox behavouir
$(".chb").prop('checked', false);
$(this).prop('checked', true);
console.log("test3")
});
I just wondered if anyone could help me figure out what is happening here. As a newbie, the script looks like it should work and I am struggling to find the mistake.
Your help would be greatly appreciated.
Thanks!
Aucun commentaire:
Enregistrer un commentaire