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

bismosa · 2012-12-02T13:26:35Z

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?

thomasyip · 2012-12-03T19:55:13Z

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.

bismosa · 2012-12-04T17:18:02Z

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!

thomasyip closed this as completed Dec 3, 2012

thomasyip reopened this Dec 4, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

bismosa commented Dec 2, 2012

thomasyip commented Dec 3, 2012

bismosa commented Dec 4, 2012

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

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

Comments

bismosa commented Dec 2, 2012

thomasyip commented Dec 3, 2012

bismosa commented Dec 4, 2012