jeudi 28 novembre 2019

Checkbox behave like radiobox javascript

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