Cannot Alter Class Name of Checkboxes Dynamically

I have a table with 10 rows and 2 columns. The first column of each row displays a description and the second column contains a checkbox with a class of CheckBox. When I check a checkbox and then click the Hide button, the row which contains that checkbox will be hidden and the class name of all unchecked checkboxes will be changed from CheckBox to Visible.

The problem is when the checkboxes with a class name of Visible is checked I want to change their class name from Visible back to CheckBox but it does not work. Please follow this link to see my script, in particular please look at the line “$(‘.Visible’).on(‘change’, function(){…})”. Thanks

Combination of two things:
1: capitalizing your class names is throwing jQuery off the scent. lowercase is good.
2: Event Delegation.
Your code loads, says “right, everything that is classed Visible, gets this event trigger.” nothing at document load time has that class. So it does nothing.
Later you add that class to things, but it doesnt mean the rest of your code goes back and runs again.

Instead, what you need to do is Delegate your Events.

Try it yourself, or more likely you’re just going to click below to see what the code should be.

Line 26: $(this).attr(‘class’,‘visible’);

Line 32: $(‘.chkbx’).on(‘change’,‘.visible’, function(){

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.