Skip to content
This repository

Radio button does not function properly #3670

Closed
Azuo opened this Issue February 28, 2012 · 4 comments

6 participants

Azuo Mat Marquis John Bender Scott Jehl Mattias Kihlström mnhjofi
Azuo

Consider the following simple HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>JQM Radio Test</title>
        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
        <!--
        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        -->
        <script type="text/javascript">
        <!--
            $(document).delegate("#form", "submit", function(e) {
                var checked = $(this).find("input:checked");
                if (checked.length)
                    alert("Radio with value \"" + checked.val() + "\" is checked.");
                else
                    alert("None of radio is checked.");
                return false;
            });
        //-->
        </script>
        <style type="text/css">
        <!--
            .ui-radio .ui-btn {
                z-index: 0!important;
            }
        -->
        </style>
    </head>
    <body>
        <div id="page" data-role="page">
            <div data-role="content">
                <form id="form" data-ajax="false">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <legend>Check one:</legend>
                        <input type="radio" id="radio1" name="radio" value="1" />
                        <label for="radio1">Radio1</label>
                        <input type="radio" id="radio2" name="radio" value="2" />
                        <label for="radio2">Radio2</label>
                        <input type="radio" id="radio3" name="radio" value="3" />
                        <label for="radio3">Radio3</label>
                    </fieldset>
                    <input type="submit" value="Submit" data-inline="true" />
                </form>
            </div>
        </div>
    </body>
</html>

When you click any decorated radio button, the native radio button does not get checked at all. If you click submit button, you will be informed that no radio button is checked.

This problem does not occur if using JQM 1.0.1.

I don't know whether this is a jQuery bug or a JQM bug, but if I move the following line (in radiocheck.js)

self._getInputSet().not( input ).removeAttr( "checked" );

just before the line:

input.attr( "checked", inputtype === "radio" && true || !input.attr( "checked" ) );

the problem will be fixed.

Scott Jehl

Commented on this issue in #2553, which I believe introduced the regression.

Mattias Kihlström

Looks like this is related to #3482.

mnhjofi

was just about to point to http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/forms-all.html where "radio-choice-b" is missing from the parameters when clicking on submit...

John Bender

should be fixed, with tests. c1e230f

John Bender johnbender closed this February 29, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.