jQTouch Change Checkbox via Code not working after the user has clicked the checkbox

Here a sample:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch &beta;</title>
<link rel="stylesheet" href="../../themes/css/jqtouch.css"
    title="jQTouch">

<script src="../../src/lib/zepto.min.js" type="text/javascript"
    charset="utf-8"></script>
<script src="../../src/jqtouch.min.js" type="text/javascript"
    charset="utf-8"></script>
<!-- Uncomment the following two lines (and comment out the previous two) to use jQuery instead of Zepto. -->
<!-- <script src="../../src/lib/jquery-1.7.min.js" type="application/x-javascript" charset="utf-8"></script> -->
<!-- <script src="../../src/jqtouch-jquery.min.js" type="application/x-javascript" charset="utf-8"></script> -->

<script src="../../extensions/jqt.themeswitcher.min.js"
    type="application/x-javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon : 'jqtouch.png',
        icon4 : 'jqtouch4.png',
        addGlossToIcon : false,
        startupScreen : 'jqt_startup.png',
        statusBar : 'black-translucent',
        themeSelectionSelector : '#jqt #themes ul',
        preloadImages : []
    });

    // Some sample Javascript functions:
    $(function() {

        // Show a swipe event on swipe test
        $('#swipeme').swipe(
                function(evt, data) {
                    var details = !data ? '' : '<strong>' + data.direction
                            + '/' + data.deltaX + ':' + data.deltaY
                            + '</strong>!';
                    $(this).html('You swiped ' + details);
                    $(this).parent().after('<li>swiped!</li>')
                });

        $('#tapme').tap(function() {
            $(this).parent().after('<li>tapped!</li>')
        });

        $('a[target="_blank"]').bind('click', function() {
            if (confirm('This link opens in a new window.')) {
                return true;
            } else {
                return false;
            }
        });

        // Page animation callback events
        $('#pageevents').bind(
                'pageAnimationStart',
                function(e, info) {
                    $(this).find('.info').append(
                            'Started animating ' + info.direction
                                    + '&hellip;  And the link '
                                    + 'had this custom data: '
                                    + $(this).data('referrer').data('custom')
                                    + '<br>');
                }).bind(
                'pageAnimationEnd',
                function(e, info) {
                    $(this).find('.info').append(
                            'Finished animating ' + info.direction
                                    + '.<br><br>');

                });

        // Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
        $('#callback').bind(
                'pageAnimationEnd',
                function(e, info) {
                    // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
                    if (!$(this).data('loaded')) {
                        // Append a placeholder in case the remote HTML takes its sweet time making it back
                        // Then, overwrite the "Loading" placeholder text with the remote HTML
                        $(this).append(
                                $('<div>Loading</div>').load(
                                        'ajax.html .info',
                                        function() {
                                            // Set the 'loaded' var to true so we know not to reload
                                            // the HTML next time the #callback div animation ends
                                            $(this).parent().data('loaded',
                                                    true);
                                        }));
                    }
                });
        // Orientation callback event
        $('#jqt').bind('turn', function(e, data) {
            $('#orient').html('Orientation: ' + data.orientation);
        });

    });

    function toggleCheckbox() {

        if ($('#myCheckbox1').attr('checked') == 'true') {
            $('#myCheckbox1').removeAttr("checked");
        } else {
            $('#myCheckbox1').attr('checked', true);
        }
        window.setTimeout('toggleCheckbox()', 2000); //toggle every 2 seconds
    }

    toggleCheckbox();
</script>
<style type="text/css" media="screen">
#jqt.fullscreen #home .info {
    display: none;
}

div#jqt #about {
    padding: 100px 10px 40px;
    text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0;
    color: #999;
    font-size: 13px;
    text-align: center;
    background: #161618;
}

div#jqt #about p {
    margin-bottom: 8px;
}

div#jqt #about a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
</style>
</head>
<body>
    <div id="jqt">
        <div id="home" class="current">
            <div class="scroll">
                <ul class="rounded">
                    <li>MyCheckbox<span class="toggle"><input
                            type="checkbox" id="myCheckbox1"> </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Every 2 seconds the checkbox change its value itself.

If the user click on the checkbox automatic toggling stops. But why?

Dec 02 '12 13:12 bismosa

You might need to use $().prop() for your purpose.

Regardless, it does not appear to be a problem specific to jQTouch. I bet you see the same problem without jQTouch. If I were wrong, please reopen the issue.

Dec 03 '12 19:12 thomasyip

Hello,

how can i reopen this issue? I have testet it with jquery1.7 and the latest (1.8.3)

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 20px 0 0 }
  b { color: blue; }
</style>
  <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
  <script src="jquery-1.7.js"></script>
</head>
<body>


  <script type="text/javascript">
    function toggleCheckbox() {
            //alert($('#check1').attr('checked'));
        if ($('#check1').attr('checked') == 'checked') {
            //alert("checked");
            $('#check1').removeAttr("checked");

        } else {
            $('#check1').attr('checked', true);
        }
        window.setTimeout('toggleCheckbox()', 2000); //toggle every 2 seconds
    }

    toggleCheckbox();



  </script>


<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$("input").change(function() {
  var $input = $(this);
  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>

</body>
</html>

i have this code from here: http://api.jquery.com/prop/

This example is working without problems. But i cant bring it to work with jQTouch. Or i am totally wrong?

Thank you!

Dec 04 '12 17:12 bismosa

jQTouch jQTouch copied to clipboard

Change Checkbox via Code not working after the user has clicked the checkbox

jQTouch
jQTouch copied to clipboard