New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio button does not function properly #3670

Closed
Azuo opened this Issue Feb 29, 2012 · 4 comments

Comments

Projects
None yet
6 participants
@Azuo
Contributor

Azuo commented Feb 29, 2012

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.

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 29, 2012

Contributor

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

Contributor

scottjehl commented Feb 29, 2012

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

@kihlstrom

This comment has been minimized.

Show comment
Hide comment
@kihlstrom

kihlstrom Feb 29, 2012

Looks like this is related to #3482.

Looks like this is related to #3482.

@mnhjofi

This comment has been minimized.

Show comment
Hide comment
@mnhjofi

mnhjofi Feb 29, 2012

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

mnhjofi commented Feb 29, 2012

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

@ghost ghost assigned johnbender Feb 29, 2012

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Mar 1, 2012

Contributor

should be fixed, with tests. c1e230f

Contributor

johnbender commented Mar 1, 2012

should be fixed, with tests. c1e230f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment