Back

Technologies:

javascriptjavascript
jqueryjquery
avatar
Tolerim
13 days ago

jQuery was unable to retrieve checkbox elements with a particular CLASS NAME during the operation.

I am trying to ensure that only one of the two checkboxes below can be selected at a time. However, the jQuery code I created to capture the child layer (.staffType2) is not working, and I am not sure why. Can you suggest any solutions or ideas? Here's the current state of my code, which includes a click event listener that removes the "checked" attribute from all .staffType2 checkboxes except the one that was clicked: 
$('.staffType2').click(function () {
 $(".staffType2").not(this).removeAttr("checked");
 });
Unfortunately, this logic only works for checkboxes within the parent layer (staffTypeSet), and not the child layer (.staffType2). Any thoughts or suggestions on how I can modify this code to solve the problem are greatly appreciated. Thank you.
Answers(2)
avatar
Vogi
12 days ago
Verified Answer
It seems like you are trying to ensure that only one of the two checkboxes below can be selected at a time. However, the jQuery code you created to capture the child layer (.staffType2) is not working, and you are not sure why. You want to modify this code to solve the problem. 
$('.staffType2').click(function () {
 $(".staffType2").not(this).removeAttr("checked");
 });
The code above only works for checkboxes within the parent layer (staffTypeSet), and not the child layer (.staffType2). One solution is to use the following code: 
$('.staffTypeSet').on('change', '.staffType2', function() {
    $('.staffType2').not(this).prop('checked', false);
});
This code uses event delegation to capture changes in the child layer (.staffType2) and then unchecks all other checkboxes in that layer except for the one that was clicked. The prop() method is used instead of removeAttr() because it is more efficient and works better with newer versions of jQuery. I hope this helps! Let me know if you have any other questions or concerns.

Sources

How to Allow Only One Checkbox Checked at a Time in JQuery?Select only one checkbox at a time using jQuery | CodeamendHow to select only one checkbox at a time in jquery examplejquery - Only one checkbox to be checked at time - Stack OverflowHow to only have one checkbox checked at a time?Allow only single checkbox to be checked at a time - Telerik
avatar
Tolerim
13 days ago
The reason why the code is not having any effect is because it is not targeting the correct checkboxes. The code is only targeting elements with the class "staffType2" which are not direct children of the "staffTypeSet" parent element. To fix this, you can modify the code to use the "children" method to target the direct children of the parent element, like this: 
$('.staffTypeSet').children('.staffType2').click(function() {
  $(this).siblings('.staffType2').prop('checked', false);
});
In this modified code, we first select the parent element with the "staffTypeSet" class, then use the "children" method to target only its direct children with the "staffType2" class. We then use the "click" method to listen for clicks on these checkboxes. Finally, we use the "siblings" method to target all other checkboxes with the "staffType2" class, and set their "checked" property to false. This way, only one checkbox can be selected at a time within the parent element.
;