Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Checkbox/Radio change event problem #3781

Closed
ibnadam opened this Issue · 14 comments

7 participants

@ibnadam

First here's the code:

<div id="new-value" style="padding:3px;background-color:red;color:white;"></div>
<fieldset data-role="controlgroup" data-mini=true>
<legend></legend>
<input type="radio" name="test" id="test-1" value="Short option 1" checked="checked"/>
<label for="test-1">Short option 1</label>
<input type="radio" name="test" id="test-2" value="This is some very long option 2" />
<label for="test-2">This is some very long option 2</label>
<input type="radio" name="test" id="test-3" value="This is some very long option 3" />
<label for="test-3">This is some very long option 3</label>
</fieldset>
<script>
$("input:radio[name=test]").on("change", function(event, ui){
    var value = $(this).val();
    $('#new-value').html("New value: " + value);
});
</script>

I'm seeing a problem on my Samsung Galaxy s2 (android 2.3.6) where if I make selection by clicking on a radio button where there is label text I get inconsistent results: i.e. the value that I get in the change handler is not for the button that appears to be checked.

The easiest way I found to reproduce this problem is as follows (You may have to try this a few times):
When first option has a short label, and the next option has a long label (as in my example) and when selecting the first option your finger happens to touch that first button & the next button as well AND your finger touches the part of the first button with no label text AND your finger touches the part of the second button with the label text, then 2 change events are fired which is fine but you end up with the first button appearing to be checked whereas the change event handler shows the checked value to be for the second button.

Happens with 1.0.1, 1.1.0-rc1 & latest.

@ibnadam

You can try it here also: http://jsfiddle.net/KCtUK/1/

@johnbender johnbender closed this
@johnbender johnbender reopened this
@johnbender

@ibnadam

It kind of sounds like you have to mash your fingers on the checkboxes to get the effect?

@ibnadam

Yes, when you touch "across" the buttons, so it's more likely to happen when buttons are in mini version.

@anho

Removing return false; from the vclick-handler of the label does it for me without side effects yet.

@gillvm

still getting the same problem as described above with android on jqm 1.1.1 with jq 1.8.1 . Problem is worse the bigger the screen,ie samsung tab 10.1 .

not sure what andrea means about vclick-handler, if you could give a worked example of the fix it would be great, thanks

@jaspermdegroot
Collaborator

Issue #5071 (closed as duplicate) is the same but with checkboxes and Android 4.0.4.

@jaspermdegroot
Collaborator

Edited the title (was: "radio buttons change event problem (android 2.3.6)").

The issue seems to appear on both Android and iOS with radio buttons and checkboxes.

Closed #4959 as duplicate.

@InternetSavage

Is there a work around for this issue? I have a mobile survey app I'm working on and this is a real problem.

@gillvm

The workaround we used was to add a carriage return above and below the button text. This makes the button wider and so the user is less likely to click the edge. Sounds lame, but it seems to work.

@InternetSavage

That doesn't sound very robust. Is this problem fixed in version 1.3.0?

@InternetSavage

The workaround I came up with is to add a click handler to each of the checkbox inputs. Then in the click event handler first call refresh on the checkbox and then iterate through the list of checkboxes for that group and programmatically check or uncheck the input based on whether it has the class ui-checkbox-on or ui-checkbox-off. Here is the code I'm using.

$(document).bind("pageinit", function (e) {
var $page = $(e.target);
$page.find("input:checkbox[name=selections]").click(function () {
$(this).checkboxradio("refresh");

    $page.find("input:checkbox[name=selections]").each(function (index, element) {
        var $checkbox = $(this);
        var $label = $checkbox.next();

        if ($label.hasClass("ui-checkbox-off")) {
            $checkbox.prop("checked", false);
        } else if ($label.hasClass("ui-checkbox-on")) {
            $checkbox.prop("checked", true);
        }
    });
});

});

@jaspermdegroot
Collaborator

We are planning on making some bigger changes in button markup and CSS for 1.4. That is probably needed to fix this so I am changing the milestone to 1.4.

Related issues: #4826 and #3073

@jaspermdegroot
Collaborator

@ibnadam @gillvm @InternetSavage - Can you test again with latest code on master?

  <link rel="stylesheet"  href="http://code.jquery.com/mobile/git/jquery.mobile-git.css" /> 
  <script src="http://code.jquery.com/jquery-1.10.1.js"></script> 
  <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> 

@arschmitz -If this is still an issue we might have to change vclick to click in the checkboxradio widget.

@arschmitz
Owner

no response to request for test closing

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