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

Question

About a month ago Mitt’s question went unanswered. Sadly, I’m running into the same situation now.

http://api.jquery.com/change/#comment-133939395

Here’s the situation: I’m using jQuery to capture the changes in a radio button. When the radio button is selected I enable an edit box. When the radio button is de-selected, I would like the edit box to be disabled.

The enabling works. When I choose a different radio button in the group, the change event is not fired. Does anyone know how to fix this?

<input type="radio" id="r1" name="someRadioGroup"/> 

<script type="text/javascript">
    $("#r1").change(function () {
        if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', true);
        }
    });
</script>

Solution 1

Looks like the change() function is only called when you check a radio button, not when you uncheck it. The solution I used is to bind the change event to every radio button:

$("#r1, #r2, #r3").change(function () {

Or you could give all the radio buttons the same name:

$("input[name=someRadioGroup]:radio").change(function () {

Here's a working jsfiddle example (updated from Chris Porter's comment.)

Per @Ray's comment, you should avoid using names with . in them. Those names work in jQuery 1.7.2 but not in other versions (jsfiddle example.).

Solution 2

<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/><br/>
<input type='text' id='r1edit'/>                  

jquery part

$(".rg").change(function () {

if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', 'disabled');
        }
                    });

here is the DEMO

Solution 3

You can bind to all of the radio buttons at once by name:

$('input[name=someRadioGroup]:radio').change(...);

Working example here: http://jsfiddle.net/Ey4fa/

Solution 4

This normally works for me:

if ($("#r1").is(":checked")) {}

Solution 5

My problem was similar and this worked for me:

$('body').on('change', '.radioClassNameHere', function() { ...

View more solutions

Comments

[Rafay]

your current code will only listen to the change in radio button with id=r1

[antwarpes]

if id=r2 is selected, id=r1 should be de-selected? de-selection of a radio button isn't captured by this?

[Rafay]

chk this may be it'll help jsfiddle.net/aqZgs

[basic6]

Don't use removeAttr('disabled'), use prop() to change the state, see my answer.

[Admin]

This one works, unlike the other ones that has been marked as correct :S

[RAmPE]

The jsFiddle solution is set to Mootools instead of jQuery and prevents it from functioning. Try this solution to see the behavior: jsfiddle.net/N9tBx. I added a log of changes and you can easily see that the change event isn't fired when the checked radio button is unchecked as another is checked.

[genericHCU]

+1. Andomar's solution worked but this makes more sense to me. Using the class selector prevents having to change the function if the form changes or has a dynamic number of fields. Yay for necro votes! (though now 2 years later jQuery recommends using prop() instead of attr(). api.jquery.com/prop)

[Ray]

The input "[name=someRadioGroup]" syntax is wrong. The correct syntax is: "input[name=someRadioGroup]:radio". Also worth noting is that this method only works in version 1.7.2 of JQuery. A bug has been submitted for this. See: jsfiddle.net/zn7q2/2 for an example of this bug if you are curious.

[Andomar]

@Ray: The bug only occurs for names with a dot in them. Without the dot it works fine, see jsfiddle.net/zn7q2/4

[Imaky]

The example works with dots if you change to "input[name='DateSearchOptions.Test']" (name enclosed between single quotes): jsfiddle.net/4hTxn

[Justin]

Should change .attr('checked') to .prop('checked').

[basic6]

Bad example, this is not how it's done. See my other answer for disabling elements (removing attributes is wrong).

[Terence Golla]

A variation on this is $("form input:radio").change(...); and test the specific radio button condition prop('checked'). This is very useful when using a dynamic RadioButtonList in ASP.NET.

[Bartho Bernsmann]

The code "if ($("#myCheckbox").attr("checked"))" Didn't work for me, I had to use "if ($("#myCheckbox").is(":checked"))".

[Alex Mulchinock]

This doesn't answer the OPs original question. You're not using jQuery here, and you're using PHP to handle the checking logic, not Javascript.