Jquery $("#radioButton").change(...) not firing during de-selection

Calling Dynamic Elements to Order

In case of dynamically added elements (those that sneak in after the page load), direct binding of events won't work. Here, you need to call in the power of event delegation:

$(document).on('change', 'input:radio[name="group"]', function() {
    // And that's how you tell the newbies how it's done!
});


This technique involves appointing a common parent element, surprisingly often the document itself, to keep an eye on the radio buttons added after the initial bell rings (page loads).

Toggling Elements: Enabled and Disabled

When it comes to enabling or disabling elements based on the radio button's current mood (state), always call prop() to duty.

$('#radioButton').change(function() {
    if ($(this).prop("checked")) {
        // Fun fact: edit boxes like to party when radio buttons check-in
        $('#editBox').prop("disabled", false);  // Enables edit box
    }
});


To show the red card (disable an element), set the disabled attribute to true.

The Right Attribute at the Right Time

Choosing the correct function between prop() and attr() can save a lot of head scratching.

Here's a pro tip:

• prop() handles properties that change over time like, checked, disabled, and selected.
• attr() refers to the true HTML attribute of an element, fundamentally immortal and unchanging post page load.

The Power of the :checked Selector

The mighty :checked selector in jQuery is the superhero you need for quickly identifying the chosen radio button:

let chosenOne = $('input:radio[name="group"]:checked').val();
console.log('Who's the chosen one?', chosenOne);


No riddles here, just straight-up, efficient solutions when you're running logic based on the current state.

Managing Change in Groups

Say you have a group of radio buttons and each one when selected should unlock a unique superpower (perform a unique action). We've got you covered:

$('input:radio[name="group"]').change(function() {
    if ($('#radio1').prop("checked")) {
        // Radio1 has the power of invisibility
    } else if ($('#radio2').prop("checked")) {
        // Radio2 can time travel
    }
});


Each condition checks the state of a specific radio button, dividing the actions as clearly as water and oil.

Dealing with the De-selection Dilemma

To deal with the dilemma of de-selection, we make de-selection into action:

$('input:radio[name="group"]').change(function() {
    if (!this.checked) {
        // The de-selected ones go to the bench
    }
});


Remember, in the game of radio buttons, when one button wins (gets selected), another loses (gets de-selected). And we can use that to our advantage.