Question

I’m having an issue with some jQuery that I am using in an asp.net mvc3 application that handles mutually exclusive radio buttons. The check/unchecking part works fine but the value of the radio button control is left with it’s true value even though it is unchecked.

Here is the jQuery that I’m using:

$('.customRadio').click(function () {
    var checkState = $(this).attr('checked');
    $('.customRadio:checked').each(function () {
        $(this).attr('checked', false);
    });
    $(this).attr('checked', checkState);
});

I’ve tried setting the .val('myValue') property with jQuery like so but it’s not working:

$(this).val($(this).getAttribute("falsevalue"));

Here is the rendered html:

<div class="one columns " style="min-width: 64px;">

                    <label for="Approve" class="hide-on-phones" style="white-space: nowrap">Approve</label>
                    <span class="clearfix hide-on-phones"></span>
                    <label for="Approve" class="show-on-phones">Approve &nbsp; </label>
                    <span class="clearfix show-on-phones"></span>                        

                <input class="customRadio" falsevalue="N" id="Approve" name="Approve" truevalue="Y" type="radio" value="N">
            </div>

<div class="one columns " style="min-width: 50px;">

                    <label for="Reject" class="hide-on-phones" style="white-space: nowrap">Reject</label>
                    <span class="clearfix hide-on-phones"></span>
                    <label for="Reject" class="show-on-phones">Reject &nbsp; </label>
                    <span class="clearfix show-on-phones"></span>                        

                <input class="customRadio" falsevalue="Y" id="Reject" name="Reject" truevalue="N" type="radio" value="Y">
            </div>

I am inspecting the elements with Chrome.

Anyone have any ideas or suggestions?

Answer 1

getAttribute is a native JS method, use attr() :

$(this).val($(this).attr("falsevalue"));

Be aware that if you’re inspecting the element in a DOM inspector, like chrome or firebug, the checked property will not change even if you programmatically change it, but it will be changed when the form submits. And there should’nt be a need for a loop, simply doing $('.customRadio:checked').prop('checked', false); should do (and being a property, prop() would be the correct method).