CODEWITHSUNDEEP
jqueryhtmlradio-button
Kevin Carbonaro
Kevin Carbonaro

Reputation: 25

IE8 radio buttons .change() event fires even without change

It seems that the following HTML and jQuery event do not work as expected in Internet Explorer. In IE the event is fired every time the radio button is clicked (even if it is the currently selected one). In Chrome it works fine. Any ideas for an IE fix?

<input id="system-open" type="radio" name="system-closure" value="false" checked="">Open
<input id="system-close" type="radio" name="system-closure" value="true">Close

$("input[name=system-closure]:radio").change(function () {
    alert($(this).val());
})

Upvotes: 1

Views: 737

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337610

You could store the previous value in a data attribute on a containing element to see if the selection has actually changed. Try this:

<div class="radio-container">
    <input id="system-open" type="radio" name="system-closure" value="false" checked="">Open
    <input id="system-close" type="radio" name="system-closure" value="true">Close
</div>

$("input[name=system-closure]:radio").change(function () {
    var $radio = $(this);
    var $container = $radio.closest('.radio-container');
    var currentValue = $radio.val();
    var oldValue = $container.data('old-value');

    if (currentValue != oldValue) {
        // the selection has been changed, do something...
        alert($(this).val());
    }

    $container.data('old-value', currentValue);
})

Upvotes: 2

Related Questions