Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Radio button does not function properly #3670

Closed
Azuo opened this Issue · 4 comments

6 participants

@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.

@Wilto Wilto was assigned
@scottjehl

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

@kihlstrom

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...

@johnbender johnbender was assigned
@johnbender

should be fixed, with tests. c1e230f

@johnbender johnbender closed this
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.